jquery - jQuery - 判断 CSS 动画何时达到 100%

Question

有没有办法用 jQuery 判断动画何时达到其动画的 100%？

{0%{-xxx-transform:translate(0,0);}
100%{-xxx-transform:translate(-500px, 300px); opacity: 0.1;}

Answer 1

这是正确的答案。

$(elem).bind('webkitAnimationEnd', function (event) { //function });

如何通过 JavaScript 重新触发 WebKit CSS 动画？

Answer 2

您可以使用该transitionend事件。

$('#elem').bind('transitionend', function()
{
    alert('finished animating');
});

Answer 3

为清楚起见，这里列出了所有特定于浏览器的“animationEnd”属性：

$('#foo').bind('animationEnd oAnimationEnd msAnimationEnd mozAnimationEnd webkitAnimationEnd', function(event){
    // Do stuff once the CSS animation has finished.
});