1

我有一个小盒子，见fiddle，当鼠标进入时它必须显示它的背面，并且当鼠标再次离开时应该继续 360 度（“回到”正常状态）。

但是，我不希望动画中止，而是继续完成 360 度转弯，即使鼠标快速进入和离开也是如此。假设当鼠标离开时动画达到 30 度，它应该继续完成 360 度转弯，通过 180 度（背面视图）。

有谁知道如何实现这一目标？我无法让动画继续，特别是继续沿相同的旋转方向，而不是反转并返回其起始位置......

的JavaScript：

$('.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

这里的技巧有两个方面：

  1. 首先，您需要确保您有办法知道动画是否正在进行（因此上面的示例绑定在 transitionend 上）。
  2. 然后你必须知道这个过渡结束也会在动画回来时触发，因此我们切换了动画标志。

然后在鼠标离开事件（设置动画标志时）上添加 1 秒延迟，以确保动画在反转之前已经完成。

这是一个粗略的解决方案，但它应该足以让你继续前进。

编辑：

上面的代码反转了动画，但没有继续它 - 这是你需要在同一方向继续的内容。注意：它有点 hacky，只在 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 回答