Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The TransitionEvent
interface represents events providing information related to transitions.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The TransitionEvent
interface represents events providing information related to transitions.
TransitionEvent()
Creates a TransitionEvent
event with the given parameters.
Also inherits properties from its parent Event
.
TransitionEvent.propertyName
Read only
Is a DOMString
containing the name CSS property associated with the transition.
TransitionEvent.elapsedTime
Read only
Is a float
giving the amount of time the transition has been running, in seconds, when this event fired. This value is not affected by the transition-delay
property.
TransitionEvent.pseudoElement
Read only
Is a DOMString
, starting with ::
, containing the name of the pseudo-element the animation runs on. If the transition doesn't run on a pseudo-element but on the element, an empty string: ''
.
TransitionEvent
transitioncancel
An Event
fired when a CSS transition has been cancelled.
transitionend
An Event
fired when a CSS transition has finished playing.
transitionrun
An Event
fired when a CSS transition is created, when it is added to a set of running transitions, though not necessarily started
transitionstart
An Event
fired when a CSS transition has started transitioning.
Also inherits properties from its parent Event
.
TransitionEvent.initTransitionEvent()
Non-Standard
Deprecated
Initializes a TransitionEvent
created using the deprecated Document.createEvent("TransitionEvent")
method.
Specification |
---|
CSS Transitions Level 2 # interface-transitionevent |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
TransitionEvent |
27
2-71
|
12
|
4
|
10
|
≤12.1
|
7
4
|
≤37-71
4.4
|
27
18-71
|
4
|
≤12.1
|
7
3
|
2.0
1.0-10.0
|
TransitionEvent |
27
|
79
|
23
|
No
|
15
|
No
|
4.4
|
27
|
23
|
14
|
No
|
2.0
|
elapsedTime |
2
|
12
|
4
|
10
|
≤12.1
|
6
|
4.4
|
18
|
4
|
≤12.1
|
6
|
1.0
|
initTransitionEvent |
2-18
|
12-79
|
6-23
|
10
|
≤12.1-15
|
4-6
|
No
|
No
|
6-23
|
≤12.1-14
|
3-6
|
No
|
propertyName |
2
|
12
|
4
|
10
|
≤12.1
|
6
|
4.4
|
18
|
4
|
≤12.1
|
6
|
1.0
|
pseudoElement |
2
|
79
|
23
|
No
|
15
|
6
|
4.4
|
18
|
23
|
14
|
6
|
1.0
|
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent