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
1
vote
1 answer

Mootools does not supports transitionend enven?

$(element).addEvent('transitionend', function(e){ // do soming... }); In firefox, it not works. But, use addEventListener instead of addEvent, it work. Does mootools not supports css events?
R.Wan
  • 25
  • 1
  • 4
1
vote
1 answer

Waiting for transitionend in a loop with JavaScript

I am so used to working with jQuery that I can't seem to figure out how I can do this in plain Javascript. I don't want to use jQuery because this is the only snippet that I use on the site and the library is too large for only that purpose. This is…
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
1
vote
1 answer

For JavaScript or jQuery, how to make transitionend event not fire?

In the link: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions it is said that: Note: The transitionend event doesn't fire if the transition is aborted because the animating property's value is changed before the…
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
0
votes
2 answers

transitionend fires from inner child

This is the minimum reproducable example. transitionend for 'toggle' hover is firing (which I dont want) and hiding 'a' prematurely. To reproduce click on toggle after transition ends. I realize this is happening because toggle is inside a (I cannot…
Toniq
  • 4,492
  • 12
  • 50
  • 109
0
votes
0 answers

How to Delay Audio Playback in Safari

I'm creating a flashcard activity in javascript where I want the audio (a vocabulary word in mp3 format) to play once the card has finished flipping and the word's text is revealed. This requires a one-second delay between the time the user clicks…
Mike Fox
  • 1
0
votes
1 answer

How can I get TransitionEnd to work on EACH item in a collection, instead of only firing on the last item?

I need the element to transition (with an added class), then restore upon completion of said transition (by removing the class). This works, but only on the last element in the collection (no matter how many are there). How can I get the…
DtM
  • 3
  • 3
0
votes
1 answer

Incorrect height value after transition in eventListener

var container = document.querySelector(".container"); var bar = document.querySelector(".bar"); var barL = document.getElementsByClassName("barLayer"); var value =…
Tukenmezkelam
  • 63
  • 7
0
votes
1 answer

jQuery: Unbinding transtionend event

I want an object to move first left, then up, every time I call this action. It works fine the first time, but on second time, the object moves diagonally not in steps. Currently I have this: myObject.bind("transitionend webkitTransitionEnd…
yodalr
  • 9,778
  • 10
  • 32
  • 47
0
votes
0 answers

Transitionend triggered on child transitionend

I'm running a transitionend on a parent div because I want to wait until that transition is complete. Unfortunately, there is a child button that has a transition that trigggers the transitionend event to run before the parent div has finished its…
dgas02
  • 88
  • 1
  • 7
0
votes
1 answer

Transitionend event firing prematurely for 100% width on wider resolution screens?

I shrink my scheduler slightly when the editor opens, then when the editor closes, I slide the scheduler back to 100% width and have to do a resize so the events all go to their new correct positions. The issue is, that on wider screens, the…
Tyler Dahle
  • 817
  • 1
  • 8
  • 37
0
votes
3 answers

Toggle function fires twice on transitionend

I have a toggle whose checked status I am calling with jQuery. Every time I click the toggle from unchecked to checked, the console logs "do this!" twice. Why does this function fire twice and what is the workaround to get it to fire…
iskandarblue
  • 7,208
  • 15
  • 60
  • 130
0
votes
0 answers

Accordion - add/remove loading class on css transition (timing issue)

I'm building an accordion where I'm toggling each accordion-fold on click. The javascript toggles a class while the css takes care of the animation. When the accordion-fold is transitioning (expands or contracts) I want to set all the…
Operator
  • 504
  • 8
  • 17
0
votes
1 answer

masonry.js - layout items with transition effect on them

I am using knockout.js and masonry.js in my project. so as documentation of masonry suggest I use reloaditems method to apply changes of the DOM to masonry. it worked fine until I add a hover transition effect to my items. here is the code. as you…
Mosijava
  • 3,941
  • 3
  • 27
  • 39
0
votes
1 answer

Animation doesn't complete with jQuery TransitionEnd event

Situation .rightnav.front is clicked for DIV1. DIV1 moves to the right, and opacity is lowered DIV1 moves back left, and at completion opacity is 0 DIV1 gets class .hidden and .offset to hide it and to move it off screen, so it's not clickable…
Terje Nygård
  • 1,233
  • 6
  • 25
  • 48
1
2
3