JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<button id="add">Добавить</button>

<ul id="test">
    <li class="visible">Text 1</li>
</ul>

CSS

#test li {
    opacity: 0;
    
-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

#test li.visible {
    opacity: 1;
}

JavaScript

var $test = $('#test'),
    $add = $('#add'),
    counter = 1;

$add.on('click', function () {
    counter++;
    $test.append('<li>Text ' + counter + '</li>');
    
    setTimeout(function () {
        $test.find(':last-child').addClass('visible');
    }, 25);
});