如何在发生多个过渡时检测“特定”元素上的 CSS 过渡结束？

Posted 2023-05-08

【中文标题】如何在发生多个过渡时检测“特定”元素上的 CSS 过渡结束？

【英文标题】：How do I detect the end of a CSS transition on a 'specific' element while multiple transitions are taking place?

【发布时间】：2012-05-29 06:06:01

【问题描述】：

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

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

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

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

我想做的是将 'transitionend' 事件绑定到 'specific' 元素。目前它似乎在任何元素上寻找一个 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%'
                );     
            );         
        );

    

【参考方案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 转换的浏览器。作为后备，我将 jquery .animate() 与标准回调一起使用。

谢谢，如果有动画的孩子有同样的问题，比你正在观看的元素短，它会在第一个动画完成后触发。这造成了很多麻烦。