JSFiddle - React, Tailwind, and code Playground

by ShaCP

HTML

<div id='el'>My width gets bigger</div>
<div id='noChain'>My transition doesn't chain</div>
<div id='chain'>My transition chains</div>

CSS

div {
    height: 100px;
    width: 100px;
    background-color: red;
    transition: all 0s ease 0s;
}
.is__orange {
    background: orange;
}
.is__purple {
    background: purple;
}
.is__extended {
    width: 200px;
}
.is__active {
    transition: all 5s ease 0s;
}

/*added by me*/
div:hover {
  height: 150px;
}

JavaScript

var el = document.getElementById('el');
el.className += ' is__extended is__active';

el.addEventListener('transitionend', function(e) {
    el.className = '';
});

var nochain = document.getElementById('noChain');
nochain.className += ' is__active is__purple';

nochain.addEventListener('transitionend', function(e) {
    nochain.className = '';
    nochain.className   = ' is__active is__purple';
});

var chain = document.getElementById('chain');
chain.className += ' is__active is__orange';

chain.addEventListener('transitionend', function(e) {
    chain.className = '';
    setTimeout(function(){
        chain.className = ' is__active is__orange';
    }, 0);
});