JSFiddle - React, Tailwind, and code Playground

HTML

<div>Click to start animation</div>

CSS

div
{
    width: 100px;
    height: 50px;
    background: red;
    text-align: center;
    
    transition: background 2s;
    -webkit-transition: background 2s; /* Safari */
}

.green
{
    background: green;
}

JavaScript

var AnimationComplete;

$('div').click(function() {
    $(this).addClass('green');
    AnimationComplete= false;
    console.log(AnimationComplete);
});

$("*").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    AnimationComplete= true;
    alert('animate ended');
    console.log(AnimationComplete);    
    return false; /*Cancel any bubbling*/
});