// Inspired by: https://davidwalsh.name/css-animation-callback var toggle = true; $( "body" ).on( "click", function() { var pos = (toggle) ? '0px' : '100px'; $('ul').css('left', pos); toggle = !toggle; }); function whichTransitionEvent(){ var t; var el = document.createElement('fakeelement'); var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } } } $( ".mover" ).on( whichTransitionEvent(), function() { console.log('Transition complete! This is the callback, no library needed!'); }); /* // From original author's demo page, grabbed from the inspector. (function() { var e = document.getElementsByClassName('mover')[0]; function whichTransitionEvent(){ var t; var el = document.createElement('fakeelement'); var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd' } for(t in transitions){ if( el.style[t] !== undefined ){ return transitions[t]; } } } var transitionEvent = whichTransitionEvent(); transitionEvent && e.addEventListener(transitionEvent, function() { console.log('Transition complete! This is the callback, no library needed!'); }); startFade = function() { e.className+= ' hide'; } })(); */
<p>Click anywhere on this thing to move the vertical list. Open the console to see a message when the transition finishes.</p> </p> <div class="wrapper"> <ul class="mover trans-left"> <li>Stuff</li> <li>and</li> <li>Things</li> <li>and</li> <li>Such</li> </ul> </div>
html, body, ul { margin:0; padding:0; } .wrapper { display:block; width:600px; background:#222; height:300px; } ul { position:absolute; left:0px; list-style-type:none; display: block; width:500px; background: #ddd; border:1px solid #000; border-bottom:none; } li { display:block; padding:10px; border-bottom:1px solid #000; } .trans-left { -webkit-transition:left .5s linear; transition:left .5s linear; }