有没有办法在css3动画的情况下实现回调函数？在 Javascript 动画的情况下，它是可能的，但在 css3 中找不到任何方法。
我可以看到的一种方法是在动画持续时间之后执行回调，但这并不能确保它总是在动画结束后立即被调用。这将取决于浏览器 UI 队列。我想要一个更健壮的方法。有什么线索吗？
CSS3 动画完成后是否有回调？
IT技术
javascript
css
frontend
2021-01-20 00:31:12
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 Plugin来处理你的 CSS3 转换/浏览器兼容性。例子：
//Pulsing, moving element
$("#element").click( function () {
$('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});
其它你可能感兴趣的问题