How to run a callback when a CSS animation is closed?

Question

I saw that the angular-Animate can detect when a CSS transaction is in progress or not to apply certain actions.

I need to find out how they do it!

Example:

#square{
   background-color: tomato;
   height: 100px;
   width: 100px;
   font-weight: bold;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: sans-serif;
   transition: background-color .2s linear, color 1s ease-out;
}


#square:hover{
    background-color: white;
    color: tomato;

}

<div id="square">
   SQUARE
</div>

How to detect the end of an animation transition in Javascript Puro?

_{Answers with jQuery are not welcome :D}

Answer 1

The event to be used is the transitionend, the

let square = document.querySelector("#square");
square.addEventListener('transitionend', function (event) {
     console.log("Terminou:", event.propertyName);
});

#square{
   background-color: tomato;
   height: 100px;
   width: 100px;
   font-weight: bold;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: sans-serif;
   transition: background-color .2s linear, color 1s ease-out;
}


#square:hover {
    background-color: white;
    color: tomato;

}

<div id="square">
   SQUARE
</div>

However it is important to note that for each effect that will be animated in your case is color and background-color two events will be triggered transitionend.

Another very important thing to note, is that if you take the mouse off the element it will do the inverse animation, which is still an animation and therefore will also trigger the event, see as the example with long times:

let square = document.querySelector("#square");
square.addEventListener('transitionend', function (event) {
     console.log("Terminou:", event.propertyName);
});

#square{
   background-color: tomato;
   height: 100px;
   width: 100px;
   font-weight: bold;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: sans-serif;
   transition: background-color 2s linear, color 3s ease-out;
}


#square:hover {
    background-color: white;
    color: tomato;

}

<div id="square">
   SQUARE
</div>

---

The event transitioncancel

There is the event transitioncancel that is able to check if the animation/transition has been canceled midway

Only works on Firefox 53+, other browsers has no support

as an example:

let square = document.querySelector("#square");
square.addEventListener('transitionend', function (event) {
     console.log("Terminou:", event.propertyName);
});
square.addEventListener('transitioncancel', function (event) {
     console.log("Cancelado:", event.propertyName);
});

#square{
   background-color: tomato;
   height: 100px;
   width: 100px;
   font-weight: bold;
   color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: sans-serif;
   transition: background-color 2s linear, color 3s ease-out;
}


#square:hover {
    background-color: white;
    color: tomato;

}

<div id="square">
   SQUARE
</div>

---

Retro-compatibility

For old browsers the transitionend is only supported with prefixes, if you need backward compatibility then you can use the following events:

• .addEventListener('webkitTransitionEnd'): before Chrome 36 and Webkit 7.0.6 (Safari and Android)
• .addEventListener('oTransitionEnd'): Implemented in Opera 10.5
• .addEventListener('otransitionend') (minuscule): Implemented in Opera 12.0 (opera has now prefixed to 12.10)

Answer 2

For you who only want raw javascript:

// Determinando o elemento 
var e = document.getElementsByID('#square')[0];

// Checando o evento 
function checkTransicao(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
};


// Criando o evento 
var transitEvent = checkTransicao();

transitEvent && e.addEventListener(transitEvent, function() {
    //aqui é o callback


});

For those who use JQUERY: I believe you can always catch the end of the animation like this:

    $('#square').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
    function(e) {
    // execução do código pós término

  });

Or you can capture the event once just like this:

    $('#square').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
    function(e) {
    // execução do código pós término

  });

You choose... ;)