JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<button type=button id=bar>trigger</button>

<div id=foo>Lorem ipsum, dolor sit ahmet.</div>

CSS

#foo { padding:50px 0; text-align:center; font-size:5em; }
.tstart { transform:scale(2, 1.1); }
.trans { transition:transform 4s; }
#bar { position:relative; z-index:1; }

JavaScript

$('#bar').on('click', function() {
    $('#foo').toggleClass('tstart');
    $('#foo').toggleClass('trans', !$('#foo').hasClass('tstart'));
    console.log($('#foo').hasClass('tstart'));
});

$('#foo').on('transitionend webkitTransitionEnd', function(e) {
    console.log(e);
    $('#foo').removeClass('trans ');
});