JSFiddle - React, Tailwind, and code Playground

by davidmurdoch

HTML

<div class='myDiv'>Hello</div>
<a id='myButton' href='#'>Toggle noTransitionClass</a>
<br/><br/>
When toggling (on AND off) the div should NEVER "transition".

CSS

.myDiv {
    background: red;
    -webkit-transition: all 1s linear;            
}
.myDiv:hover {
     background:green;   
}
.noTransition{
    background:blue;
    -webkit-transition:none;
}

JavaScript

$("#myButton").click(function(e){
    e.preventDefault();
    $(".myDiv").toggleClass("noTransition");
});