JSFiddle - React, Tailwind, and code Playground

by chucknelson

HTML

<p>Wrong Behavior - List that always has transitions enabled</p>
<ul id="my-list1">
    <li class="animated">Item 1</li>
    <li class="animated">Item 2</li>
    <li class="animated">Item 3</li>
    <li class="animated">Item 4</li>
    <li class="animated">Item 5</li>
</ul>

<p>Correct Behavior - List that disables transitions on drag/sort</p>
<ul id="my-list2" class="remove-transition">
    <li class="animated">Item 1</li>
    <li class="animated">Item 2</li>
    <li class="animated">Item 3</li>
    <li class="animated">Item 4</li>
    <li class="animated">Item 5</li>
</ul>

CSS

li {
    width: 75px;
    border: 1px solid #ccc;
}

.animated {
    -webkit-transition: all 0.3s linear;
}

.flipped {
    -webkit-transform: rotateX(180deg);
    width: 50px;
    
}

JavaScript

//Sortable with webkit transition test
$(function() {
    $('ul').on('click', 'li', function(event) {
        $(this).toggleClass('flipped');
    });
    
    $('ul').sortable({
        start: function(event, ui) {
            if(ui.item.parent().hasClass('remove-transition')) {
                ui.item.removeClass('animated');
            }
            //ui.item.html('Sorting');
        },        
        stop: function(event, ui) {
            if(ui.item.parent().hasClass('remove-transition')) {
                ui.item.addClass('animated');
            }
            //ui.item.html('Stopped');
        },
        update: function(event, ui) {
            //alert('Updated!');
        }
    });
});