JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<div id="slider">
    
    <div class="slider_container">
        
        <div class="item">
            
        </div>            
        
    </div>    
    
</div>

CSS

#slider .item{ 
    
    position:relative;
    
    float:left;
    
    background:#ccc;             
    
    border:5px solid #000;
    
    width:200px;height:300px;
    
    -webkit-transform: scale(0.89);
    
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    
}
#slider .item.current{
    
    border: 5px solid red;
    -webkit-transform: scale(1);
    
    
}

JavaScript

$('#slider .item').addClass("current")

$('#slider .item.current').bind('webkitTransitionEnd', function(event) {

    console.log(event.originalEvent.propertyName);

    if (event.originalEvent.propertyName === "-webkit-transform") { //check which transition property is finished, otherwise will fire multiple times for each property (i.e. z-index)
        console.log("Webkit Transform FTW!!");

        // Need to unbind the event
        $(this).unbind('webkitTransitionEnd');
    }

});