javascript - 当发生多个转换时，如何检测 'specific' 元素上的 CSS 转换结束？

Question

我一直在使用以下方法来检测 CSS3 过渡的结束，如下所示:-

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

这很完美，一个 CSS 转换发生，然后当它完成时，另一个发生。

但是，当我将这个匿名函数嵌套到第三层时，它不起作用。第三个过渡“结束”事件与第二个同时触发，而不是将它们一个接一个地链接起来(就像 jQuery .animate() 会发生的那样)

我想做的是将“transitionend”事件绑定(bind)到一个“特定” 元素。目前它似乎在任何元素上寻找 transitionend 事件并相应地触发。如果没有，是否有另一种解决方法，以便我可以让三个连续的 css 转换事件排队，在前一个事件完成后全部触发。

提前致谢。

下面是导致问题的代码:-

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

好吧，我实际上已经找到了答案，希望这能帮助遇到同样问题的其他人。

解决方案是使用标准的 jQuery .on() 方法而不是“触发一次”.one() 方法。然后检查目标以查看它是否是您将事件绑定(bind)到的元素，最后，删除同一匿名函数中的事件处理程序。

在我的例子中，这使得“第三个”嵌套转换代码看起来像这样:-

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

如果其他人有更优雅的解决方案，请告诉我，我会酌情将答案奖励给您。