transitionend 事件

返回上一级

HTML DOM 的 transitionend 事件在 CSS 完成过渡后触发

如果过渡在完成前移除,例如 CSS transition-property 属性被移除,过渡事件将不被触发

更多关于 CSS 过渡的知识,可以访问我们的 CSS3 过渡

语法

object.addEventListener("transitionend", /*myScript*/ )

Safari 3.1 到 6.0 代码

object.addEventListener("webkitTransitionEnd", /*myScript*/ ) 

Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法

浏览器支持

26.0+ 10.0+ 16.0+
4.0+ 为 mozTransitionEnd
6.1+
3.1+ 为 webkitTransitionEnd
12.1+
10.5+ 为 oTransitionEnd

其它

是否支持冒泡 Yes
是否可以取消 Yes
事件类型 TransitionEvent

范例

CSS 完成过渡后修改 <div> 元素样式及文字

var el = document.getElementById("myDIV");

//  Safari 3.1 到 6.0 代码
el.addEventListener("webkitTransitionEnd", myFunction);

// 标准语法
el.addEventListener("transitionend", myFunction);

运行范例 »

相关页面

CSS 基础教程: CSS3 过渡

CSS 参考手册: CSS3 过渡属性

CSS 参考手册: CSS3 transition-property 属性

返回上一级

JavaScript 参考手册

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.