0

我有一个 CSS 过渡，用于-webkit-transform: translateX将 div 从右向左移动，它是一个基本的滑动移动（我保证在我的情况下只有 webkit 用户）。

我的问题是我需要在动画完成时运行一个动作，到目前为止，我一直在使用 JavaScript 中的 setTimeout 调用在动画完成后运行 1 毫秒。

它在 99% 的情况下都可以完美运行，但在极少数情况下，它运行不顺利并且会导致问题，我知道这是由于超时没有在正确的时间准确运行。

从我的在线研究中，我听说为 webkit 转换结束添加了一个事件侦听器，但无法使其正常工作，它在网上其他人的示例中运行良好：

jsfiddle.net/jfriend00/5FnwY/

我的动画是由 javascript 触发的，单击按钮时，.move_in该类被添加到主div元素中，然后开始动画。CSS如下：

.renderZone {
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration:805ms;
    -moz-animation-timing-function:ease-in-out;
    -moz-animation-duration:805ms;
}

.move_in {
    -webkit-transform: translateX(0%) !important;
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-0%) !important;
    -moz-animation-name: slideouttoleft;
}

.move_out {
    -webkit-transform: translateX(-100%) !important;
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-100%) !important;
    -moz-animation-name: slideouttoleft;
}

@-webkit-keyframes slideouttoleft {
    from {
        -webkit-transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-100%);
    }
}

有没有人知道解决这个问题的最佳方法，甚至是更好的方法来做我正在做的事情？我需要保持 CSS 动画按原样运行，因为这在我一直在试验的 iOS 上提供了最佳性能。

希望有人能帮忙！

谢谢！！！

4

1 回答 1

1

CSS3 有一个名为“webkitAnimationEnd”的属性，它可以用作 JavaScript 中的事件列表器。

示例代码：

function cssAnimationEnd() {
    //looks for the ID box from the css and fires the event listen when the animation is complete.
    box.addEventListener( 'webkitAnimationEnd', function( event) {
      alert( "Finished animation!" );
    }, false );
}
于 2013-02-01T17:09:13.690 回答