javascript - CSS3 animation end techniques - Stack Overflow

admin管理员组

文章数量:1344925

So I wanted to open a dialog in the munity about various techniques people have used to detect when an animation is ended. Particularly when fading something out (read opacity).

Now I am not sure what other people have used, but I have found it particularly effective to use a timeout to wait for the animation to end, and then hide it, like so (using jQuery obviously):

$('#someDiv').css({'opacity':0});
setTimeout(function(){$('#someDiv').hide()}, 500);

where the CSS looks like this:

#someDiv {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

I am aware of the transition end bindings that most of the modern browsers have implemented, but I seriously dislike using them. The seem a bit flaky and I hate having to loop over and set the listeners up. Plus with each browser having a totally different event fired, it gets hairy.

What are some thoughts on the various techniques that are out there? Since this is relatively new and undocumented, let's see what people have been using!

Thanks guys! -Geoff

So I wanted to open a dialog in the munity about various techniques people have used to detect when an animation is ended. Particularly when fading something out (read opacity).

Now I am not sure what other people have used, but I have found it particularly effective to use a timeout to wait for the animation to end, and then hide it, like so (using jQuery obviously):

$('#someDiv').css({'opacity':0});
setTimeout(function(){$('#someDiv').hide()}, 500);

where the CSS looks like this:

#someDiv {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

I am aware of the transition end bindings that most of the modern browsers have implemented, but I seriously dislike using them. The seem a bit flaky and I hate having to loop over and set the listeners up. Plus with each browser having a totally different event fired, it gets hairy.

What are some thoughts on the various techniques that are out there? Since this is relatively new and undocumented, let's see what people have been using!

Thanks guys! -Geoff

• javascript
• jquery
• html
• animation
• css

Share Improve this question Follow asked Mar 30, 2012 at 12:57 gabaum10gabaum10 3,82744 gold badges4949 silver badges8989 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

There is an event for this called

transitionend

which makes much more sense than to use a setTimeout.

So you should go like

$('#someDiv').css({'opacity':0}).on('transitionend', function(e) {
    $(this).hide();
});

---

Since the name for that event-type can vary between browsers, I wrote a little helper:

var dummy           = document.createElement( 'div' ),
    eventNameHash   = { webkit: 'webkitTransitionEnd', Moz: 'transitionend', O: 'oTransitionEnd', ms: 'MSTransitionEnd' },
    transitionEnd   = (function _getTransitionEndEventName() {
        var retValue = 'transitionend';

        Object.keys( eventNameHash ).some(function( vendor ) {
            if( vendor + 'TransitionProperty' in dummy.style ) {
                retValue = eventNameHash[ vendor ];
                return true;
            }
        });

        return retValue;
    }());

So use that code to advance-conditional load the correct event name and then use the transitionEnd variable for the .on() binding name.

Example: http://jsfiddle/QBFtH/1/

本文标签： javascriptCSS3 animation end techniquesStack Overflow