码农教程 - 一技在手,衣食无忧! tools

目录

transitionend 事件

❮上一节 活动参考 下一节❯

示例

当 CSS 转换结束时，对 <div> 元素执行一些操作：

// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);

// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
亲自试一试 »

描述

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

笔记：如果过渡在完成之前被删除，例如如果 CSS过渡性质属性被删除，transitionend 事件将不会触发。

有关 CSS 过渡的更多信息，请参阅我们的教程CSS3 过渡。

语法

object.addEventListener("webkitTransitionEnd", myScript);  // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", myScript);        // Standard syntax

技术细节

气泡： 是的
可取消： 是的
事件类型： 转换事件
DOM 版本： 3 级活动

相关页面

CSS 教程：CSS3 过渡

CSS 参考：CSS3 过渡属性

CSS 参考：CSS3 过渡属性 属性

浏览器支持

event.transitionEnd是 DOM Level 3 (2004) 功能。

所有现代浏览器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 11


❮上一节 活动参考 下一节❯