JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/jontroncoso/mutant-transition/master/src/mutant-transition.js"></script>
<div class="example-container">
<div class="example" data-mutant-attributes="height">
This is an example with mutant-transition
</div><div class="example">
This is an example without mutant-transition
</div>
</div>
<a href="#" class="toggle-size">Toggle Size</a>
<p>mutant-transition observes everything. you can even use 'inspect element' to change the classes (try 'parent-height') and it will detect those changes</p>
CSS
.example {
-webkit-transition: height 0.5s;
-moz-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
background-color: #666666;
color: #FFFFFF;
width: 46%;
padding: 0 1%;
margin: 0 1%;
display: inline-block;
}
.example-container {
height: 100px;
}
.parent-height {
height: 100%;
}
JavaScript
$('.toggle-size').click(function(){
$('.example').toggleClass('parent-height');
});