CSS 动画 + Javascript 回调答案

【问题标题】：CSS Animation + Javascript CallbackCSS 动画 + Javascript 回调
【发布时间】：2013-01-17 01:19:18
【问题描述】：

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

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

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

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

我的动画是由 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 上提供了最佳性能。

希望有人能帮忙！

谢谢！！！

【问题讨论】：

你有什么办法可以给我们一个 jsfiddle 到你的（有点坏的）例子
您所指的工作示例可能不适用于您的情况，因为您使用的是动画，而不是过渡。因此，您应该选择animationend，而不是transitionend。你应该看看这个要点（gist.github.com/3098766）和这个问题（stackoverflow.com/questions/6186454/…）

标签： javascript css transform transition

【解决方案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 );
}

【讨论】：

抱歉，我不确定没有使用 webkit 的浏览器。