JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<p><a href="http://thegeekinvasion.com" title="TGI Home">TGI Home</a></p>

CSS

html {
    font: 0.9em sans-serif;
}
a {
    background: #2cae85;
    border-radius:5px;
    color: #e3e3e3;
    padding:5px 10px;
    -webkit-transition: all 10s ease-in-out;
	-moz-transition: all 10s ease-in-out;
	-ms-transition: all 10s ease-in-out;
	-o-transition: all 10s ease-in-out;
    transition: all 10s ease-in-out;
}
a.animate {
    background: #e3e3e3;
    color: #2cae85;
}

JavaScript

var links = document.getElementsByTagName("a");
function onTransitionEnd(event) {
    window.location.href = event.target.href;
    // Uncomment line below to refire the event
    // event.target.dispatchEvent(event);
}
for(i=0; i<links.length; i++) {
    links[i].addEventListener("click", function(e) {
        this.addEventListener("transitionend", function() {
            // Uncomment lines below to refire the event
            /* delete e.defaultPrevented;
            e.defaultPrevented = false; */
            onTransitionEnd(e);
        });
        if( this.className.search(/animate/) > -1 )
            this.className = this.className.replace("animate", "");
        else
            this.className = this.className + " animate";
        e.preventDefault();
    });
}