Stack Overflow
Stack Overflow

Questions tagged [transitionend]

The transitionend DOM Event is a transition event that occurs at the completion of a CSS Transition and therefore allows developers to perform actions that synchronize with the completion of a transition.

The transitionend DOM Event is a transition event that occurs at the completion of a CSS Transition. If the transition is removed before completion, such as if the transition-property is removed, then the event will not fire.

The transitionend event allows developers to perform actions that synchronize with the completion of a transition and is available since CSS3 (CSS Transitions Module Level 3).

General info

  • Specification: CSS Transitions
  • Target: Element, Document, Window
  • Bubbles: Yes
  • Cancelable: Yes
  • Synchronous: No
  • Context Info: propertyName, elapsedTime, pseudoElement

Links | Specifications & References

Browser Implementations / Aliases

  • Implemented in Chrome 1.0, Android 2.1 and WebKit 3.2 as "webkitTransitionEnd". Chrome 36 and WebKit 7.0.6 use the standard "transitionend".
  • Implemented as "oTransitionEnd" starting from Opera 10.5, as "otransitionend" starting from version 12 and as the standard "transitionend" starting from version 12.10.
  • Implemented as standard "transitionend" across other browser when not listed above.
How to set add event listener for standard transitionend: 
oTarget.addEventListener("transitionend", handlerFunction[, useCapture|options]);
34 questions
15
votes
2 answers

Easy way to detect support for transitionend event without frameworks like jQuery or Modernizr?

Have anybody out there found a simple way of detecting whether the browser supports the transitionend event or not in vanillaJs, especially in a way that actually works in all major browsers? :( I have found this unanswered thread in here: Test for…
hasse
  • 883
  • 2
  • 10
  • 24
12
votes
1 answer

Using transitionend event listener with react to create a transition

I'm trying to make a simple transition with react on a button click where the body max-height goes to 0 on componentWill update, then back to 500px or 100% on componentDidUpdate. I haven't been abe to quite understand it from the other questions…
Stephen Agwu
  • 1,013
  • 2
  • 15
  • 29
5
votes
1 answer

Transition End Fallback for ie9

I'm using the following code with jquery to trigger events on transitionend and avoid multiple callback/support multiple browsers: function whichTransitionEvent(){ var t; var el = document.createElement('fakeelement'); var transitions =…
christopher
  • 137
  • 8
3
votes
1 answer

transitionend is not fired when initial state and final state are the same

In the example below I'm doing background-color transition using CSS and trying to handle transitionend event for both divs. Unfortunately, transitionend is not fired for div2 as initial and final background colors are the same: var div1 =…
Limon Monte
  • 52,539
  • 45
  • 182
  • 213
2
votes
1 answer

Duplicated executions of transitionend event

I'd like to understand why the following code exponentially duplicates transitionend's return. It doesn't make any sense to me, because they are supposed to have the same behavior and should be executed just once. The expected behavior is commented…
Toninho Toddy
  • 23
  • 5
2
votes
0 answers

How to attach multiple Event Listeners to the same button in vanilla JavaScript?

Looking for the best way to have two events for same button click (vanilla javascript only please), first one should happen on touchstart the other one on the TransitionEnd. Is this would be correct / best way to do…
Alex
  • 249
  • 1
  • 4
  • 17
2
votes
0 answers

`transitionend` stops firing after several events

I have a tricky problem. When a user presses on a div I want to add a css class to that div with name .active, using css transition. Then, after a short timeout, I want to handle transitionend event where I will remove the class .active from the…
Viktor Grafskiy
  • 31
  • 2
2
votes
0 answers

What's the robust way to have JS callbacks wait on a CSS3 transition, iff the transition happens?

In the past with JS transitions, one could specify some behavior to happen after the transition, via a callback. E.g. //jQuery function hideTheContent() { $('#content').fadeOut(1000,function() { mandatoryLogicAfterHidingContent(); …
Nathan
  • 1,396
  • 3
  • 18
  • 32
2
votes
3 answers

Enabling vendor prefixes in CSS transitions make callback fires twice

I'm implementing an excellent solution (found here) to use a callback function a la jQuery when using CSS transitions. The problem is that if I use vendor prefixes, Chrome at least binds two events: one for webkitTransitionEnd and the second one for…
user900362
2
votes
0 answers

How to solve JavaScript race condition - transitionend not fired

I have the following race condition in JavaScript: (it is to fade out and fade in a

some title

after the AJAX succeeded, using CSS3 transition): AJAX success handler add the "fading-out" CSS class wait for "transitionend" event -- …
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
1
vote
1 answer

Hide the upper part of the navbar when scroll (smoothly!)

Hello I customized a Bootstrap navbar with 2 rows (the upper part is just logo and social links and the down part are navigation links). I am trying to hide the upper part when scrolling but I can't find a way to do it smoothly. I think the code…
cecileRx
  • 125
  • 1
  • 12
1
vote
2 answers

Callback after list leave animation and DOM update - VueJS

To do something after the DOM has been updated by Vue, you use the $nextTick binding. To do something after a css transition has completed, you can use transitionend event. I have a dynamic list in which things are added and removed by user…
Randy Hall
  • 7,716
  • 16
  • 73
  • 151
1
vote
2 answers

Remove class added with hover and animationend on mouseout

I have tried out the transitionend and animationend to change my css after a transition or keyframes animation ends. I made an example with both variants and they worked as expected: I can toggle a class, when a transition or animation ends. On…
webta.st.ic
  • 4,781
  • 6
  • 48
  • 98
1
vote
1 answer

'addEventListener' only onclick

I'm using 'addEventListener' to open a menu (genres-container) only after a transition on another menu (mobile-nav) is done. The problem is, once everything is closed and I try to reactivate mobile-nav, 'addEventListener' seems to fire even if I…
Maxime Pigeon
  • 13
  • 3
1
vote
2 answers

Transition end does not fire

I have an idea to create modal window with animated hide and show method and I want that it works with CSS transition. I create prototype https://jsfiddle.net/7bkvcvqq/and everything looks fine but when I trigger show and hide without delay when…
uaNiktia
  • 55
  • 6
1
2 3