JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="sb-items">
    <div class="sb-item">1</div>
    <div class="sb-item">2</div>
    <div class="sb-item">3</div>
    <div class="sb-item">4</div>
</div>
<br>
<a href="#" class="sb-prev">Previous</a> | <a href="#" class="sb-next">Next</a>
    
<br><br>
"Next" will trigger a css animation with an added class. Removing the class does not animate.<br>
"Previous" isn't triggering any animation with added or removed classes.<br>
<b>Why!?</b>

CSS

.sb-items {font-size:0}
.sb-item {
    background:#ccc;
    border:1px solid #000;
    padding:20px;
    font-size:12px;
    display:inline-block;
    text-align:center;
    line-height:25px;
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    transition:all .5s ease-out;
}

.sb-item-ani {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
}

JavaScript

$('.sb-next').live('click', function() {
    // animate away
    $('.sb-item:last').addClass('sb-item-ani');
    // after animation, move order & remove class
    $(".sb-item:last").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
        $(this).removeClass('sb-item-ani').prependTo('.sb-items');
        $('.sb-item').unbind();
    });    
});

$('.sb-prev').live('click', function() {    
    $(".sb-item:first").addClass('sb-item-ani').appendTo('.sb-items').removeClass('sb-item-ani');
});