CSS3动画完成时是否有回调？

| 在css3动画的情况下，有什么方法可以实现回调函数？如果使用Javascript动画，则可能会在CSS3中找到实现它的方法，但找不到任何方法。我可以看到的一种方法是在动画持续时间之后执行回调，但是并不能确保始终在动画结束后立即调用它。这将取决于浏览器UI队列。我想要一个更强大的方法。有什么线索吗？

已邀请:

2 个回复

朗排谎纷瘟

就在这里。回调是一个事件，因此您必须添加事件侦听器才能捕获它。这是jQuery的一个示例：

$(\"#sun\").bind(\'oanimationend animationend webkitAnimationEnd\', function() { 
   alert(\"fin\") 
});

还是纯js：

element.addEventListener(\"webkitAnimationEnd\", callfunction,false);
element.addEventListener(\"animationend\", callfunction,false);
element.addEventListener(\"oanimationend\", callfunction,false);

现场演示： http://jsfiddle.net/W3y7h/

抚驰

jQuery Transit插件是您进行回调以处理CSS3过渡/浏览器兼容性的一种简单方法。例：

//Pulsing, moving element
$(\"#element\").click( function () {
    $(\'#element\').transition({ opacity: 0, x: \'75%\' }, function () { $(this).transition({ opacity: 1, x: \'0%\' }).trigger(\"click\"); });
});

JS小提琴演示

要回复问题请先登录或注册

CSS3动画完成时是否有回调？

2 个回复

发起人

css

frontend

javascript

问题状态

CSS3动画完成时是否有回调？

与内容相关的链接

2 个回复

发起人

css

frontend

javascript

问题状态