JSFiddle - React, Tailwind, and code Playground

by Mark Polyakov

HTML

<div></div>

CSS

div{
    height: 100px;
    width: 10px;
    background: red;
    
    transition: width 2s linear;
    -ms-transition: width 2s linear;
    -moz-transition: width 2s linear;
    -webkit-transition: width 2s linear;
    -o-transition: width 2s linear;
}

JavaScript

$('div').css('width', '200px').delay(1000).queue(function() {
    var rand=$(this).get(0).offsetHeight;
    $(this).css({
        transitionDuration: '0s',
        msTransitionDuration: '0s',
        mozTransitionDuration: '0s',
        webkitTransitionDuration: '0s',
        oTransitionDuration:'0s'
    });
    $(this).css('width', '10px');
    rand=$(this).get(0).offsetHeight;
    $(this).css({
        transitionDuration: '2s',
        msTransitionDuration: '2s',
        mozTransitionDuration: '2s',
        webkitTransitionDuration: '2s',
        oTransitionDuration:'2s'
    })
})