1

私は小さな箱を持っています.fiddleを参照してください.マウスが入ると裏側を見せなければならず、マウスが再び離れると360度（通常に「戻る」）続けなければなりません.

ただし、アニメーションを中止したくはありませんが、マウスがすばやく出入りしても、360 度のターンを完了し続けます。マウスが離れたときにアニメーションが 30 度になったとします。アニメーションは 360 度回転し続け、180 度を通過します (背面図)。

これを達成する方法を知っている人はいますか？アニメーションを継続させるのに苦労しています。特に、反転して開始位置に戻るのではなく、同じ回転方向に継続するのに苦労しています...

ジャバスクリプト：

$('.cube').mouseenter(function(event){
  console.log(event);
  $(this).toggleClass('show-back',true);
});

$('.cube').mouseleave(function(event){
  console.log(event);
  $(this).toggleClass('show-back',false);
});

そして CSS 変換:

#cube.show-back {
  -webkit-transform: translateZ( -100px ) rotateY( -180deg );
     -moz-transform: translateZ( -100px ) rotateY( -180deg );
       -o-transform: translateZ( -100px ) rotateY( -180deg );
          transform: translateZ( -100px ) rotateY( -180deg );
}

上記のコードは単純なトグルを使用しているだけでは、メッセージを伝えていないことは明らかです。

4

1 に答える 1

0

あなたは私の好奇心をピークにしたので、それが可能かどうかを確認する必要がありました:)

これを試して：

$(".cube").bind('transitionend', function() {
    // Reversing the animation flag for the mouse-leave
    if ($(this).data("animating")) {
        $(this).data("animating", false);
    } else {
        $(this).data("animating", true);
    }
});

$('.cube').mouseenter(function(event){
    $(this).data('animating', true);
    $(this).toggleClass('show-back',true);
});

$('.cube').mouseleave(function(event){
    $that = $(this);
    if ($that.data("animating")) {
        setTimeout(function () { 
            $that.toggleClass('show-back',false);
        }, 1000);
    } else {
        $that.toggleClass('show-back',false);
    }
});

JSFiddle

ここでの秘訣は 2 つあります。

  1. 最初に、アニメーションが進行中であるかどうかを知る方法があることを確認する必要がありました (つまり、transitionend での上記のサンプル バインディング)。
  2. 次に、このトランジション エンドがアニメーション バックでも発生することを知っておく必要があります。そのため、アニメーション フラグを切り替えました。

次に、マウスを離すイベント (アニメーション フラグが設定されている場合) に 1 秒の遅延が追加され、逆方向のアニメーションが完了したことを確認します。

これは大まかな解決策ですが、それで十分です。

編集：

上記のコードはアニメーションを反転しますが、継続しません。同じ方向に継続するために必要なものは次のとおりです。注: 少しハックで、Chrome でのみテストされています。

JavaScript

$(".cube").bind('transitionend', function() {

    // Reversing the animation flag for the mouse-leave
    if ($(this).data("animating")) {
        $(this).data("animating", false);
    } else {
        $(this).data("animating", true);
    }
});

$('.cube').mouseenter(function(event){
    $(this).data('animating', true);
    $(this).toggleClass('show-back',true);
});

$('.cube').mouseleave(function(event){
    $that = $(this);
    if ($that.data("animating")) {
        setTimeout(function () { 
            $that.toggleClass('show-back',false);
            $that.toggleClass('show-back-again',true);
            setTimeout(function () {
                $that.toggleClass('show-back-again',false);
            }, 50);
        }, 1000);
    } else {
        $that.toggleClass('show-back',false);
        $that.toggleClass('show-back-again',true);
        setTimeout(function () {
            $that.toggleClass('show-back-again',false);
        }, 50);
    }
});

CSS

#cube.show-back-again {
-webkit-transform: translateZ( -100px ) rotateY( -360deg );
 -moz-transform: translateZ( -100px ) rotateY( -360deg );
   -o-transform: translateZ( -100px ) rotateY( -360deg );
      transform: translateZ( -100px ) rotateY( -360deg );
}

更新された JSFiddle

于 2013-09-17T21:47:07.113 に答える