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

【问题标题】：jQuery - Tell when CSS Animation hits 100%jQuery - 判断 CSS 动画何时达到 100%
【发布时间】：2012-03-22 11:59:53
【问题描述】：

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

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

【问题讨论】：

你可能想看看stackoverflow.com/questions/7134584/…它可以帮助你。

标签： jquery css css-transforms css-animations

【解决方案1】：

这是正确的答案。

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

How do I re-trigger a WebKit CSS animation via JavaScript?

【讨论】：

【解决方案2】：

您可以使用transitionend 事件。

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

【讨论】：

感谢您的回答，但实际上 transitionend 不是正确的方法。但是 'webkitAnimationEnd' 或 'animationEnd'。

【解决方案3】：

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

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

【讨论】：