有没有办法在css3动画的情况下实现回调函数?如果是 Javascript 动画,它是可能的,但在 css3 中找不到任何方法。
我可以看到的一种方法是在动画持续时间之后执行回调,但这并不能确保它总是在动画结束后立即被调用。这将取决于浏览器 UI 队列。我想要一个更强大的方法。有什么线索吗?
有没有办法在css3动画的情况下实现回调函数?如果是 Javascript 动画,它是可能的,但在 css3 中找不到任何方法。
我可以看到的一种方法是在动画持续时间之后执行回调,但这并不能确保它总是在动画结束后立即被调用。这将取决于浏览器 UI 队列。我想要一个更强大的方法。有什么线索吗?
就在这里。回调是一个事件,因此您必须添加一个事件侦听器来捕获它。这是一个使用 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"); });
});
如果您使用 Javascript 而不是 CSS 创建动画,那么您将需要使用动画 API 来设置动画的onfinish 事件的回调。
animation = myAnimatedElement.animate([
{transform: 'translateX(0px)'},
{transform: 'translateX(-100px)'},
], 700);
animation.onfinish = (e) => {
// Do something after the animation finishes
};
值得记住的是,如果动画被取消、删除或暂停,则不会触发 onfinish 事件。您可能还想根据需要为这些事件添加侦听器。