transitionend 事件

Matukio ya DOM TransitionEvent

定义和用法

transitionend 事件在 CSS 转换完成时发生。

注释：如果转换在完成之前被移除，例如如果删除了 CSS transition-property 属性，将不会触发 transitionend 事件。

如需有关 CSS 过渡的更多知识，请学习我们的 CSS3 过渡教程。

实例

当 CSS 过渡结束时，对

元素做一些事情：

// 针对 Safari 3.1 到 6.0 的代码
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

亲自试一试

语法

object.addEventListener("webkitTransitionEnd", myScript);  // 针对 Safari 3.1 到 6.0 的代码
object.addEventListener("transitionend", myScript);        // 标准语法

注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技术细节

冒泡： 支持
可取消： 支持
事件类型： TransitionEvent
DOM 版本： Level 3 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

Inanamba za namba zingeweka "webkit"、"moz" au "o" zinaangalia sababu ya kuanzia na kufikia na kufikia kwa kawaida.

Matukio 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)

Vyaovyo vya kwanza

Mwongozo wa CSS: CSS3 transition

Kifaa cha CSS: Mchakato wa CSS3 transition

Kitabu cha mifano cha CSS: Muungano wa CSS3 wa transition-property

Matukio ya DOM TransitionEvent