Question

我一直在使用以下内容来检测CSS3过渡的结束，如下所示： -

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

这很有效，会发生CSS转换，然后在完成时发生另一次转换。

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

我想要做的是将'transitionend'事件与'特定'元素联系起来。目前，它似乎在任何元素上寻找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（）方法而不是“fire once”.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');
                }
            });

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

在进行多次转换时，如何检测“特定”元素上的CSS转换结束？

1 个答案: