JSFiddle - React, Tailwind, and code Playground

by AndyE

HTML

<button>Toggle</button>
<span style="opacity: 1">Click the button to change</span>
<div></div>

CSS

span { 
    -webkit-transition: opacity 800ms ease-in;
    -o-transition: opacity 800ms ease-in;
    -moz-transition: opacity 800ms ease-in;
    -ms-transition: opacity 800ms ease-in;
    transition: opacity 800ms ease-in;
}

JavaScript

var span = document.getElementsByTagName("span")[0],
    div = document.getElementsByTagName("div")[0];
document.documentElement.onclick = function (evt) {
    if (evt.target.tagName == "BUTTON") {
        span.style.opacity ^= 1;
    }
}

var count = 0;
function transitionStage2() {
    if (count < 11) {
        if (this.style.opacity == 0)
            this.textContent = this.textContent == "Click the button to change" ? "You clicked the button" : "Click the button to change";
        
        this.style.opacity ^= 1;
        count++;
        div.textContent = "transition has run "+count+" times".replace(/ 1 times/, " 1 time");
    }
    else count = 0;
}

span.addEventListener("transitionend", transitionStage2);
span.addEventListener("oTransitionEnd", transitionStage2);
span.addEventListener("webkitTransitionEnd", transitionStage2);
span.addEventListener("MSTransitionEnd", transitionStage2);