transition incident
transitionend Event
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 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 及更早 IE 版本上工作。</p>
<script>
// Safari 3.1 到 6.0 版本代码
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
function myFunction() {
this.innerHTML = "过渡事件触发 - 过渡已完成";
this.style.backgroundColor = "pink";
}
</script>
</body>
</html>Run Instance»
Click "Run instance" button to view the online instance
Definition and usage
The transitionend event is triggered after the CSS completes the transition.
Note: If the transition is removed before completion, for example the CSS transition-property property is removed, the transition event will not be fired.
For more on CSS transitions, check out our CSS3 transitions.
Browser support
The number in the table indicates the version number of the first browser that supports the event.
The number specified by "webkit" or "moz" or "o" is the first version number prefix that supports this event.
Note: This event is only supported in Safari versions 3.1 to 6.0. Use webkitTransitionEnd prefix.
grammar
object.addEventListener("transitionend", myScript); // Standard syntax
Note: Internet Explorer 8 and earlier IE versions do not support the addEventListener() method.
Technical details
| Whether bubbling is supported: | Yes |
|---|---|
| Can be canceled: | Yes |
| Event type: | TransitionEvent |
##Related pages CSS Tutorial: CSS3 TransitionsCSS Reference Manual: CSS3 Transition PropertiesCSS Reference Manual: CSS3 transition-property Properties
