CSS3トランジションのjQuery方向認識ホバー

Question

私は方向認識のホバーとCSSトランジションを正しく動作させるのに苦労しています。基本的には、前面と背面を持つ要素のグリッドを作成しようとしています。ホバー上にCSSのトランジションがあると、その要素を反転させて背面を表示します。

（方向を意識せずに）遷移例：fiddle

あなたは関係なく、あなたのマウスは、それは常に跳ね上がる要素を入力する方法は、見ることができたよう。私はそれがマウスがどのように進入/出入りするかを反転させたい。

例：I /アウト方向にマウスに関連するクラスを追加するためにjQueryを使用していますfiddle

：

そして、ここでは、方向を意識したと私の試みです。

.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

私は、この問題に近づく最善の方法は、CSSトランジションを使用することではないと考えています。

jQueryのanimateを使用して簡単に実装することができます.jQueryアニメーションのキューを利用して、すべてのアニメーションを同期させたままにします。

JavaScriptでトランジションをアニメーション化するようにサンプルを修正しました。

Code example

Answer 2

私はあなたの質問への部分的な解決策を持っています。

しかし、アニメーションが終了する前に、あなたがdiv要素を残している場合、アニメーションが

を破損する場合、私はアニメーション

$('.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に留まるなら、これは正常に動作します。

は、私は誰かが私は一目見ただけで夫婦の問題を見ることができます