transitionend
transitionend
事件会在 CSS transition 结束后触发. 当transition完成前移除transition时,比如移除css的transition-property
属性,事件将不会被触发.如在transition完成前设置 display
为"none"
,事件同样不会被触发。
是否冒泡 | 是 |
---|---|
是否可取消 | 是 |
接口 | TransitionEvent |
事件处理器属性 | ontransitionend |
transitionend
事件是双向触发的 - 当完成到转换状态的过渡,以及完全恢复到默认或非转换状态时都会触发。 如果没有过渡延迟或持续时间,即两者的值都为0s或者都未声明, 则不发生过渡,并且任何过渡事件都不会触发。如果触发了 transitioncancel
事件,则transitionend
事件不会触发。
例
/*
* 在指定的元素上监听transitionend事件, 例如#slidingMenu
* 然后指定一个函数, 例如 showMessage()
*/
function showMessage() {
console.log('Transition 已完成');
}
var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", showMessage, false);
规范
Specification | Status | Comment |
---|---|---|
CSS Transitions transitionend |
Working Draft | Initial definition. |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0[1] 36 |
4.0 (2.0) | 10 | 10.5[2] 12 12.10 23 |
3.2[1] 7.0.6 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 4.0 (2.0) | ? | 10[2] 12 12.10 |
3.2[1] |
[1] 在 Chrome 1.0, Android 2.1 与 WebKit 3.2 上实现 webkitTransitionEnd
. Chrome 36 与 WebKit 7.0.6 上请使用标准事件 transitionend
.
[2] 在 Opera 10.5 上实现oTransitionEnd
,从版本12开始实现 otransitionend,
从版本12.10开始实现 transitionend.
参考
- The
TransitionEvent
interface and thetransitionend
event. transition
,transition-delay
,transition-duration
,transition-property
,transition-timing-function
.