JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
</ul>

CSS

li {
    cursor: pointer;
    overflow: hidden;
    height: 20px;
    transition: all 0.5s ease-out;
}

.removed {
    height: 0;
}

JavaScript

$(document).on('click', 'li', function() {
    $(this).addClass('removed');
});

$(document).on('transitionend', '.removed', function() {
    $(this).remove();
    console.log(this, 'removed');
});