transitionend 事件
实例
当 CSS 过渡结束时，对 <div> 元素做一些事情：
// Safari 3.1 到 6.0 的代码
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
亲自试一试 »
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
定义和用法
transitionend 事件在 CSS 转换完成时发生。
注释：如果转换在完成之前被移除，例如如果删除了 CSS transition-property 属性，将不会触发 transitionend 事件。
如需有关 CSS 过渡的更多知识，请学习我们的 CSS3 过渡教程。
浏览器支持
表中的数字表示支持该事件的第一个浏览器版本。
后面带 "webkit"、"moz" 或 "o" 的数字指定使用这些前缀的首个版本。
| 事件 | |||||
|---|---|---|---|---|---|
| transitionend | 26.0 4.0 (webkitTransitionEnd) |
10.0 | 16.0 4.0 (mozTransitionEnd) |
6.1 3.1 (webkitTransitionEnd) |
12.1 10.5 (oTransitionEnd) |
语法
object.addEventListener("webkitTransitionEnd", myScript); // Safari 3.1 到 6.0 的代码
object.addEventListener("transitionend", myScript); // 标准语法
object.addEventListener("transitionend", myScript); // 标准语法
注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
| 是否支持冒泡: | Yes |
|---|---|
| 是否支持取消: | Yes |
| 事件类型: | TransitionEvent |
| DOM 版本: | Level 3 Events |
相关页面
CSS 教程: CSS3 Transitions
CSS 参考手册: CSS3 transition 属性
CSS 参考手册: CSS3 transition-property 属性
