CSS3 संक्रमण के साथ jQuery दिशा-जागरूक होवर

Question

मैं दिशा-परिचित होवर और सीएसएस संक्रमण को ठीक से काम करने के लिए संघर्ष कर रहा हूं। असल में मैं सामने और पीछे के चेहरे वाले तत्वों का ग्रिड रखने की कोशिश कर रहा हूं, और जब होवर पर उस तत्व को पीछे के चेहरे को दिखाने के लिए एक सीएसएस संक्रमण होता है। (दिशा-अवगत बिना)

संक्रमण उदाहरण: fiddle

आप देख सकते हैं कोई फर्क नहीं पड़ता जो रास्ता अपने माउस एक तत्व यह हमेशा ऊपर flips प्रवेश करती है। मैं इसे जिस भी तरह से माउस अंदर/बाहर प्रवेश करता हूं उसे फ़्लिप करना चाहता हूं।

उदाहरण: fiddle

मैं jQuery का उपयोग कर रहा/बाहर दिशा माउस के लिए प्रासंगिक वर्गों को जोड़ने के लिए:

और यहाँ दिशा-अवगत के साथ अपने प्रयास है।

.hover-in-top {} 
.hover-in-right {} 
.hover-in-bottom {} 
.hover-in-left {} 

.hover-out-top {} 
.hover-out-right {} 
.hover-out-bottom {} 
.hover-out-left {} 

आप दिशा-अवगत उदाहरण यह एक तरह से काम करता है से देख सकते हैं लेकिन वहाँ प्रमुख खामियों जो मैं अपने सिर दौर नहीं मिल सकता हैं। (मैं इस पर विचार कर रहा हूं और मेरे मस्तिष्क ने बस इम्प्लोड किया है।)

वैसे भी मुझे उम्मीद है कि यह समझ में आता है। धन्यवाद।

Answer 1

मेरा मानना ​​है कि समस्या से संपर्क करने का सबसे अच्छा तरीका सीएसएस संक्रमण का उपयोग नहीं करना है।

आप अपने सभी एनिमेशन समन्वयित रखने के लिए jQuery एनीमेशन कतार का उपयोग करके, jQuery के animate का उपयोग करके इसे आसानी से कार्यान्वित कर सकते हैं।

मैंने जावास्क्रिप्ट में संक्रमण को एनिमेट करने के लिए आपके उदाहरण को संशोधित किया।

Code example

Answer 2

मैं आपके सवाल का एक आंशिक समाधान है।

लेकिन मैं एनिमेशन

$('.box-container .box').each(function() { 
 
    $(this).on('mouseenter mouseleave', function(e) { 
 
     var $this = $(this), 
 
      width = $this.width(), 
 
      height = $this.height(); 
 

 
     var x = (e.pageX - $this.offset().left - (width/2)) * (width > height ? (height/width) : 1), 
 
      y = (e.pageY - $this.offset().top - (height/2)) * (height > width ? (width/height) : 1); 
 

 
     // top = 0, right = 1, bottom = 2, left = 3 
 
     var dir_num = Math.round((((Math.atan2(y, x) * (180/Math.PI)) + 180)/90) + 3) % 4, 
 
      directions = ['top', 'right', 'bottom', 'left']; 
 

 
     // If mouse enter 
 
     if (e.type === 'mouseenter') { 
 
      // Remove all hover out classes 
 
      $this.removeClass(function(index, css) { 
 
       return (css.match(/(^|\s)hover-out-\S+/g) || []).join(' '); 
 
      }); 
 

 
      // Add in direction class 
 
      $this.addClass('hover-in-' + directions[dir_num]); 
 
     } 
 

 

 
     // If mouse leave 
 
     if (e.type === 'mouseleave') { 
 
      // Remove all hover in classes 
 
      $this.removeClass(function(index, css) { 
 
       return (css.match(/(^|\s)hover-in-\S+/g) || []).join(' '); 
 
      }); 
 

 
      // Add out direction class 
 
      $this.addClass('hover-out-' + directions[dir_num]); 
 
     } 
 
    }); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.box-container { 
 
    padding: 20px; 
 
    width: 600px; 
 
} 
 
.box-container:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 
.box-container .box { 
 
    float: left; 
 
    width: 50%; 
 
    height: 200px; 
 
    position: relative; 
 
    perspective: 600px; 
 
    border: 1px solid transparent; 
 
} 
 
.box-container .box .front, .box-container .box .back { 
 
    float: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform-style: preserve-3d; 
 
    backface-visibility: hidden; 
 
    transition: all 1s ease-in-out; 
 
    color: white; 
 
    font-size: 60px; 
 
} 
 
.box-container .box .front { 
 
    background: blue; 
 
    transform: rotateX(0) rotateY(0); 
 
    z-index: 900; 
 
} 
 
.box-container .box .back { 
 
    background: red; 
 
    z-index: 800; 
 
} 
 
.box-container .box:hover .front { 
 
    z-index: 900; 
 
} 
 
.box-container .box:hover .back { 
 
    z-index: 1000; 
 
    transform: rotateX(180) rotateY(0); 
 
} 
 

 
.box-container .box.hover-in-top .front, 
 
.box-container .box.hover-out-bottom .back { 
 
    transform: rotateX(-179deg) rotateY(0); 
 
} 
 
.box-container .box.hover-in-top .back, 
 
.box-container .box.hover-out-bottom .front { 
 
    animation: Xminus 1s ease-in-out; 
 
} 
 
@keyframes Xminus { 
 
    from {transform: rotateX(179deg) rotateY(0);} 
 
    to {transform: rotateX( 0deg) rotateY(0);} 
 
} 
 

 
.box-container .box.hover-in-bottom .front, 
 
.box-container .box.hover-out-top .back { 
 
    transform: rotateX(179deg); 
 
} 
 
.box-container .box.hover-in-bottom .back, 
 
.box-container .box.hover-out-top .front { 
 
    animation: Xplus 1s ease-in-out; 
 
} 
 
@keyframes Xplus { 
 
    from {transform: rotateX(-179deg) rotateY(0);} 
 
    to {transform: rotateX( 0deg) rotateY(0);} 
 
} 
 

 
.box-container .box.hover-in-right .front, 
 
.box-container .box.hover-out-left .back { 
 
    transform: rotateY(-179deg); 
 
} 
 
.box-container .box.hover-in-right .back, 
 
.box-container .box.hover-out-left .front { 
 
    animation: Yminus 1s ease-in-out; 
 
} 
 
@keyframes Yminus { 
 
    from {transform: rotateX(0deg) rotateY(179deg);} 
 
    to {transform: rotateX(0deg) rotateY( 0deg);} 
 
} 
 

 
.box-container .box.hover-in-left .front, 
 
.box-container .box.hover-out-right .back { 
 
    transform: rotateY(179deg); 
 
} 
 

 
.box-container .box.hover-in-left .back, 
 
.box-container .box.hover-out-right .front { 
 
    animation: Yplus 1s ease-in-out; 
 
} 
 
@keyframes Yplus { 
 
    from {transform: rotateX(0deg) rotateY(-179deg);} 
 
    to {transform: rotateX(0deg) rotateY( 0deg);} 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box-container"> 
 
    <div class="box"> 
 
     <div class="front">FRONT</div> 
 
     <div class="back">BACK</div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="front">FRONT</div> 
 
     <div class="back">BACK</div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="front">FRONT</div> 
 
     <div class="back">BACK</div> 
 
    </div> 
 
    <div class="box"> 
 
     <div class="front">FRONT</div> 
 
     <div class="back">BACK</div> 
 
    </div> 
 
</div>

एनिमेशन के साथ समस्या है, तो है कि यदि आप div छोड़ एनीमेशन समाप्त हो गया है से पहले, एनीमेशन

टूट जाएगा करने के लिए संक्रमण के कुछ बदलने की जरूरत

लेकिन यदि धीरे-धीरे आगे बढ़ें, और एनीमेशन समाप्त होने तक divs पर बने रहें, तो यह ठीक काम करेगा।

मुझे आशा है कि किसी को बेहतर समाधान मिलेगा