如何在发生多个过渡时检测 'specific' 元素上的 CSS 过渡的结束？

Question

我一直在使用以下方法来检测 CSS3 转换的结束，如下所示：

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

这非常有效，发生了CSS过渡，然后当它完成时，发生了另一个过渡。

但是，当我将此匿名函数嵌套到第三级时，它不起作用。 第三个转换"end"事件与第二个事件同时触发，而不是像jQuery .animate（）那样一个接一个地链接它们）

我想做的是将"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（）方法，而不是"fireonce".one（）方法。 然后检查目标以查看它是否是将事件绑定到的元素，最后，删除同一匿名函数中的事件处理程序。

在我的情况下，使"第三个"嵌套转换代码如下所示：-

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

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