TransitionEvent - 提供了与 CSS 转换相关的事件

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

TransitionEvent 接口提供了与 CSS 转换相关的事件。

构造函数

`TransitionEvent()`

使用给定的参数创建一个 TransitionEvent 事件。

属性

还从其父接口 Event 继承了属性。

`TransitionEvent.propertyName` 只读

一个 DOMString，其中包含与转换关联的名称 CSS 属性。

`TransitionEvent.elapsedTime` 只读

一个 float 值，用于给出该事件触发时过渡运行的时间（以秒为单位）。此值不受 transition-delay 属性的影响。

`TransitionEvent.pseudoElement` 只读

一个 DOMString，以 :: 开头，包含动画在其中运行的 pseudo-element 的名称。如果过渡不是在伪元素上而是在元素上运行，则为空字符串：''。

`TransitionEvent` 的类型

`transitioncancel`

一个 Event，在取消 CSS 转换时触发。

`transitionend`

一个 Event，在 CSS 过渡完成播放后触发。

`transitionrun`

一个 Event，在创建了 CSS 过渡（不一定要启动），将其添加到一组正在运行的过渡中时触发。

`transitionstart`

一个 Event，在 CSS 过渡开始过渡时触发。

方法

还从其父接口 Event 继承了属性。

`TransitionEvent.initTransitionEvent()`

使用废弃的 Document.createEvent("TransitionEvent") 方法创建 TransitionEvent 。

规范

规范	状态	备注
CSS Transitions TransitionEvent 的定义	工作草案	初始定义。

桌面浏览器兼容性

特性	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基础支持	27 2 — 71 WebKit	12	4	10	支持	支持
`TransitionEvent()` 构造函数	27	79	23	不支持	支持	不支持
`animationName`	不支持	12 — 79	4	10	支持	支持
`elapsedTime`	2	12	4	10	支持	6
`initTransitionEvent`	不支持¹	12 — 79	6 — 23	10	不支持¹	支持
`propertyName`	2	12	支持	未知	支持	6
`pseudoElement`	2	79	23	不支持	支持	6

移动浏览器兼容性

特性	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
基础支持	支持支持 — 71 WebKit	27 18 — 71 WebKit	未知	4	未知	支持	支持
`TransitionEvent()` 构造函数	支持	27	未知	23	未知	支持	不支持
`animationName`	不支持	不支持	未知	4	未知	支持	支持
`elapsedTime`	支持	18	未知	4	未知	支持	支持
`initTransitionEvent`	不支持¹	不支持¹	未知	6 — 23	未知	不支持¹	支持
`propertyName`	支持	18	未知	支持	未知	支持	支持
`pseudoElement`	支持	18	未知	23	未知	支持	不支持

1. 移除版本未知。

相关链接

使用 CSS 过渡
CSS 属性：:transition，transition-delay，transition-duration，transition-property，transition-timing-function。