JSFiddle - React, Tailwind, and code Playground

HTML

<div class="animate">Click to start animation</div>
<br>
<div class="error"></div>

CSS

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

.green {
    background: green;
}

.error {
    font-family: Arial;
    color: red;
}

JavaScript

var AnimationComplete = true;

$('.animate').click(function () {
    $('.error').text('');
    if (AnimationComplete) {
        $('.error').text('playing animation...');
        $(this).toggleClass('green');
        AnimationComplete = false;
        console.log(AnimationComplete);
    } else {
        $('.error').text('animation still busy, wait till it has completed');
    }
    
});

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