8

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

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

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

但是，当我将此匿名函数嵌套到第三层时，它不起作用。第三个过渡“结束”事件与第二个同时触发，而不是一个接一个地链接它们（就像 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%'
                });     
            });         
        });

    }
4

1 回答 1

11

好的，我实际上自己找到了答案，希望这能帮助其他有同样问题的人。

解决方案是使用标准的 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');
                }
            });

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

于 2012-05-22T18:16:12.433 回答