Question

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 completes, 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 completes.

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%'
                });     
            });         
        });

    }

Answer 1

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.