transitionend 事件

DOM 事件 TransitionEvent

定义和用法

transitionend 事件在 CSS 转换完成时发生。

注释：如果转换在完成之前被移除，例如如果删除了 CSS transition-property 属性，将不会触发 transitionend 事件。

如需有关 CSS 过渡的更多知识，请学习我们的 CSS3 过渡教程。

实例

当 CSS 过渡结束时，对

元素做一些事情：

// 针对 Safari 3.1 到 6.0 的代码
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

亲自试一试

语法

object.addEventListener("webkitTransitionEnd", myScript);  // 针对 Safari 3.1 到 6.0 的代码
object.addEventListener("transitionend", myScript);        // 标准语法

注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技术细节

冒泡： 支持
可取消： 支持
事件类型： TransitionEvent
DOM 版本： Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

Ɛyàn ƙarfin "webkit", "moz" tàwọn "o" ƙarfin ƙirki ƙirki tànawa.

Ƙara Chrome IE Firefox Safari Opera
transitionend 26.0
4.0 (webkit)		 10.0 16.0
4.0 (moz)		 6.1
3.1 (webkit)		 12.1
10.5 (o)

Ƙarfin ƙarfin

CSS ƙurɗe: ƙarfin ƙariya 3

CSS ƙaɗanin ƙirki: ƙarfin ƙariya 3

CSS 参考手册：CSS3 transition-property 属性

DOM 事件 TransitionEvent