JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<div> a</div>

CSS

div {
    background:red;
}
.has-transition {
   -webkit-transition: margin-left 1s ease-out;
      -moz-transition: margin-left 1s ease-out;
        -o-transition: margin-left 1s ease-out;
           transition: margin-left 1s ease-out;
}

JavaScript

$(function() {
    $('div').click(function() {
       $(this).removeClass('has-transition');

// меняем свойство
$(this).css('margin-left', 100);

// принудительно вызываем reflow, изменения в классе и свойстве будут применены сразу
$(this).height(); // как пример, можно использовать любое обращение к свойствам

// ставим класс с transition на место
$(this).addClass('has-transition');

// меняем свойство
$(this).css('margin-left', 0); 
    });
});