如何在没有JavaScript库的情况下检测转换结束？ [英] How do I detect a transition end without a JavaScript library?

问题描述

我想在完成CSS转换动画后删除一个对象，但我无法使用JavaScript库。

I'd like to delete an object after it's done animating with a CSS transition, but I'm not able to use a JavaScript library.

如何检测动画何时完成？我是否以某种方式使用回调或自定义事件？

How do I detect when the animation is done? Do I use a callback or custom event somehow?

推荐答案

element.addEventListener('transitionend', function(event) {
    alert("CSS Property completed: " + event.propertyName);
}, false );

目前，确切的事件名称尚未标准化。以下是 MDN ：

For now, the exact event name has not been standardized. Here's a quote from MDN:

转换完成时会触发一个事件。

在所有符合标准的浏览器中，事件是 transitionend ，
在WebKit中的
它是 webkitTransitionEnd 。

这是Webkit的小提琴： http://jsfiddle.net/bNgWY/

Here's the fiddle for Webkit: http://jsfiddle.net/bNgWY/

这篇关于如何在没有JavaScript库的情况下检测转换结束？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！