javascript - How do I detect the end of a CSS transition on a 'specific' element while multiple transitions are

admin管理员组

文章数量:1279184

I have been using the following to detect the end of a CSS3 transition, like so:-

    CACHE.previewControlWrap.css({
                'bottom':'-217px'
            }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
                CACHE.songWrap.css({
                    'bottom': '0'
                });
     });

This works perfectly, a CSS transition takes place, then when it pletes, another takes place.

However when I nest this anonymous function down to a third level, it does not work. The third transition 'end' event is fired at the same time as the second, instead of chaining them one after another (as would happen with jQuery .animate())

What I would like to do is tie the 'transitionend' event to a 'specific' element. Currently it seems to look for a transitionend event on any element and fires accordingly. If not, is there another workaround so that I can have three successive css transition events queued up all firing after the previous one pletes.

Thanks in advance.

Below is the code that is causing the issue:-

if(Modernizr.csstransitions){

        CACHE.leftcolbottom.css({
            'left':'-230px'
        });
        CACHE.songwrap.css({
            'left':'100%',
            'right': '-100%'
        });
        CACHE.previewControlWrap.css({
            'bottom':'-217px'
        }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
            CACHE.songWrap.css({
                'bottom': '0'
            });
            CACHE.middle.css({
                'bottom': '350px'
            }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
                CACHE.slidewrap.css({
                    'left': '50%',
                    'right': '0%'
                });
                CACHE.leftcoltop.css({
                    'left': '0%'
                });     
            });         
        });

    }

I have been using the following to detect the end of a CSS3 transition, like so:-

    CACHE.previewControlWrap.css({
                'bottom':'-217px'
            }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
                CACHE.songWrap.css({
                    'bottom': '0'
                });
     });

This works perfectly, a CSS transition takes place, then when it pletes, another takes place.

However when I nest this anonymous function down to a third level, it does not work. The third transition 'end' event is fired at the same time as the second, instead of chaining them one after another (as would happen with jQuery .animate())

What I would like to do is tie the 'transitionend' event to a 'specific' element. Currently it seems to look for a transitionend event on any element and fires accordingly. If not, is there another workaround so that I can have three successive css transition events queued up all firing after the previous one pletes.

Thanks in advance.

Below is the code that is causing the issue:-

if(Modernizr.csstransitions){

        CACHE.leftcolbottom.css({
            'left':'-230px'
        });
        CACHE.songwrap.css({
            'left':'100%',
            'right': '-100%'
        });
        CACHE.previewControlWrap.css({
            'bottom':'-217px'
        }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
            CACHE.songWrap.css({
                'bottom': '0'
            });
            CACHE.middle.css({
                'bottom': '350px'
            }).one('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function () {
                CACHE.slidewrap.css({
                    'left': '50%',
                    'right': '0%'
                });
                CACHE.leftcoltop.css({
                    'left': '0%'
                });     
            });         
        });

    }

• javascript
• jquery
• jquery-animate
• css-transitions

Share Improve this question Follow asked May 22, 2012 at 17:49 gordyrgordyr 6,2761414 gold badges6767 silver badges123123 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Okay, i've actually found the answer myself, hopefully this will help someone else with the same issue.

The solution is to use the standard jQuery .on() method rather than the 'fire once' .one() method. Then check for the target to see if it the element you bound the event to, then finally, remove the event handler within the same anonymous function.

The makes the 'third' nested transition code look like this in my case:-

}).on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', function (e) {
                if($(e.target).is(this)){
                    CACHE.slidewrap.css({
                        'left': '50%',
                        'right': '0%'
                    });
                    CACHE.leftcoltop.css({
                        'left': '0%'
                    });
                    $(this).off('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd');
                }
            });     

If anyone else has a more elegant solution, please let me know and I will award the answer to you as appropriate.

本文标签：