0

I have a CSS transition that uses -webkit-transform: translateX to move a div from the right to the left, its a basic sliding movement (I am guaranteed to only have webkit users in my case).

My problem is that I need to run an action when the animation completes, and up until now I have been using a setTimeout call in javascript to run 1 ms after the animation completes.

It works 99% of the time perfectly, but in rare circumstances, it doesn't go smoothly and it causes problems and I know this is due to the timeout not running exactly at the correct time.

From my research online, I have heard of adding an event listener for webkit transition end but cannot get it working, it works fine on someone else's example online:

jsfiddle.net/jfriend00/5FnwY/

My animation is triggered by javascript, on click of a button, the .move_in class is added to the main div element which then starts the animation. The CSS is below:

.renderZone {
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration:805ms;
    -moz-animation-timing-function:ease-in-out;
    -moz-animation-duration:805ms;
}

.move_in {
    -webkit-transform: translateX(0%) !important;
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-0%) !important;
    -moz-animation-name: slideouttoleft;
}

.move_out {
    -webkit-transform: translateX(-100%) !important;
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-100%) !important;
    -moz-animation-name: slideouttoleft;
}

@-webkit-keyframes slideouttoleft {
    from {
        -webkit-transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-100%);
    }
}

Does anybody have any idea of the best way to approach this, or even a better way of doing what I am doing? I need to keep the CSS animation running the way it is as this provides the best performance on iOS which I have been experimenting a lot with.

Hoping somebody can help!

Thanks!!!

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
user1873468
  • 477
  • 1
  • 4
  • 11
  • Is there any way you can give us a jsfiddle to your (somewhat broken) example – Prisoner Feb 01 '13 at 16:59
  • 1
    The working example you're referring to probably does not work in your case because you're using animations, not transitions. So rather than transitionend you should go for animationend. You should def check out this Gist ( https://gist.github.com/3098766 ) and this SO question ( http://stackoverflow.com/questions/6186454/is-there-a-callback-on-completion-of-a-css3-animation ) – Aurelio Feb 02 '13 at 03:13

1 Answers1

1

CSS3 has a property called “webkitAnimationEnd” which can be used as an event lister in JavaScript.

Example code:

function cssAnimationEnd() {
    //looks for the ID box from the css and fires the event listen when the animation is complete.
    box.addEventListener( 'webkitAnimationEnd', function( event) {
      alert( "Finished animation!" );
    }, false );
}
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
BingeBoy
  • 2,951
  • 1
  • 16
  • 12