0

This is my CSS:

.animated {
 transition: 1s;
 left: -400px;
 }

I want to element after it class name has been set to .animated. and after it finish the transition I want to fire a function. Can someone please suggest me the idea?

Beri
  • 11,470
  • 4
  • 35
  • 57
Minh Bang
  • 81
  • 2
  • 3
  • 9
  • 1
    take a look here http://stackoverflow.com/questions/2087510/callback-on-css-transition – Jasper Mar 26 '15 at 08:12
  • Use the animation callback `$("#myDiv").animate({width:'100px'}, 200, function() { console.log("After animation"); });` – cyber_rookie Mar 26 '15 at 08:13

1 Answers1

0

You can use transitionEnd event, it's fired when a CSS transition has completed:

function showMessage() {
    alert('Transition has finished');
}

var element = document.getElementById("animated");
element.addEventListener("transitionend", showMessage, false);

DEMO

marsh
  • 1,431
  • 1
  • 13
  • 19