CSS 动画 + Javascript 回调

CSS Animation + Javascript Callback

本文关键字：回调 Javascript 动画 CSS      更新时间：2023-09-26

我有一个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上提供了我一直在尝试的最佳性能。

希望有人能帮忙！

谢谢！！！

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 );
}
相关文章：