transitionend 事件
示例
当 CSS 过渡结束时对 <div> 元素执行操作
// Safari 3.1 到 6.0 的代码
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
自己尝试 »
描述
当 CSS 过渡完成时会发生 transitionend 事件。
注意: 如果在完成之前移除了过渡，例如，如果移除了 CSS 的 transition-property 属性，则 transitionend 事件将不会触发。
有关 CSS 过渡的更多信息，请参阅我们关于 CSS3 过渡 的教程。
语法
object.addEventListener("webkitTransitionEnd", myScript); // Safari 3.1 到 6.0 的代码
object.addEventListener("transitionend", myScript); // 标准语法
技术细节
| 冒泡 | 是 |
|---|---|
| 可取消 | 是 |
| 事件类型 | TransitionEvent |
| DOM 版本 | 级别 3 事件 |
相关页面
CSS 教程: CSS3 过渡
CSS 参考: CSS3 transition 属性
CSS 参考: CSS3 transition-property 属性
浏览器支持
event.transitionEnd 是 DOM 级别 3 (2004) 功能。
它在所有现代浏览器中完全支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
