Asked  6 Months ago    Answers:  5   Viewed   47 times

Are there any events fired by an element to check whether a css3 transition has started or end?

 Answers

85

W3C CSS Transitions Draft

The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.


Webkit

To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd.

box.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

Mozilla

There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.

Opera

There is one type of transition event available. The oTransitionEnd event occurs at the completion of the transition.

Internet Explorer

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.


Stack Overflow: How do I normalize CSS3 Transition functions across browsers?

Tuesday, June 1, 2021
 
Asnexplore
answered 6 Months ago
89

For a comprehensive explanation of why this happens, see this Q/A, and this one.

Basically, at the time you set the new style the browser still has not applied the one set inline, your element's computed style still has its display value set to "" , because it's what elements that are not in the DOM default to. Its left and top computed values are still 0px, even though you did set it in the markup.

This means that when the transition property will get applied before next frame paint, left and top will already be the ones you did set, and thus the transition will have nothing to do: it will not fire.

To circumvent it, you can force the browser to perform this recalc. Indeed a few DOM methods need the styles to be up to date, and thus browsers will be forced to trigger what is also called a reflow.
Element.offsetHeight getter is one of these method:

let tablehtml = `
<div id="spanky" 
  style="position: absolute; 
    left: 10px; 
    top: 10px; 
    background-color:blue; 
    width:20px; 
    height:20px;
    transition: left 1000ms linear 0s, top 1000ms linear 0s;">
</div>`;

document.body.innerHTML += tablehtml;

let animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) { 
  animdiv.style.backgroundColor='red';
}, false);
// force a reflow
animdiv.offsetTop;
// now animdiv will have all the inline styles set
// it will even have a proper display

animdiv.style.backgroundColor='green';
Object.assign(animdiv.style, {
  left: "100px", 
  top: "100px" 
});
Monday, June 7, 2021
 
freeMagee
answered 6 Months ago
23

in jQuery you should use bind() or on() method:

$(this).parent().bind( 'transitionend', function() {alert("1"); });
Thursday, July 29, 2021
 
Isky
answered 4 Months ago
44

Alright!

After a week of testing, removing and adding CSS rules I finally found the solution that fixed my problem. I originally had this problem in both Firefox 39 and Safari 9 but Firefox mysteriously fixed itself with the latest update. Safari however, did not. The problem has to do with the 3D rendering of elements on the page. The element I tried to scale had to be transformed into 3D context, the flickering elements on the page switched between 2D and 3D as explained by @Woodrow-Barlow in the other answers.

By adding

-webkit-transform: translate3d(0, 0, 0);

to the flickering elements, and thus rendering them in 3D on page load, they no longer had to switch!

EDIT 1: For people who have this issue in other browsers, take a look at the CSS 'will-change' property: https://dev.opera.com/articles/css-will-change-property/

Monday, August 9, 2021
 
jwegner
answered 4 Months ago
34

Here is a simplified test case:

div {
    background: blue;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

div.loading {
    opacity: 1;
    background: red;
    transition: opacity 2s ease-in-out, background 1s ease-in;
}

Notice how the opacity fades the same in and out, but the background only fades in, and immediately turns blue on fade out.

I used :hover as an example, but it should work the same when adding and removing classes with JavaScript.

Demo

If you'd like a more specific example please provide a reduced test case on dabblet or Jsfiddle.

Wednesday, August 11, 2021
 
ManojGeek
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share