transitionend 事件
JavaScript基础 2022-06-08 12:03:35小码哥的IT人生shichen
transitionend 事件
实例
当 CSS 过渡结束时，对 <div> 元素做一些事情：
// 针对 Safari 3.1 到 6.0 的代码
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* 针对 Safari 3.1 到 6.0 */
transition: width 2s;
}
#myDIV:hover {
width: 400px;
}
</style>
</head>
<body>
<p>请将鼠标悬停在下方的 div 元素上，等待过渡效果结束。</p>
<div id="myDIV"></div>
<p><b>注释：</b>本例在 Internet Explorer 9 和更早版本中不起作用。</p>
<script>
// 针对 Safari 3.1 到 6.0 的代码
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
function myFunction() {
this.innerHTML = "transitionend event occured - The transition has completed";
this.style.backgroundColor = "pink";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
transitionend 事件在 CSS 转换完成时发生。
注释：如果转换在完成之前被移除，例如如果删除了 CSS transition-property 属性，将不会触发 transitionend 事件。
如需有关 CSS 过渡的更多知识，请学习我们的 CSS3 过渡教程。
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
后面带 "webkit"、"moz" 或 "o" 的数字指定使用这些前缀的首个版本。
| 事件 | 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) |
语法
object.addEventListener("webkitTransitionEnd", myScript); // 针对 Safari 3.1 到 6.0 的代码
object.addEventListener("transitionend", myScript); // 标准语法
注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
| 冒泡： | 支持 |
|---|---|
| 可取消： | 支持 |
| 事件类型： | TransitionEvent |
| DOM 版本： | Level 3 Events |
