javascript - 调用不同的 CSS transitionEnd 事件

Question

对于代码的这个特定部分，我正在使用 CSS 转换为 slider 内的两个元素设置动画。一个是加载图像 (gif)，另一个是 slider 。

因为有两个元素要通过转换动画，我想听两个不同的 transitionEnd 事件。一张用于加载图像，一张用于 slider 。

我目前正在使用这段代码:

 base._initStage = function() {
                base._initListeners();

                //checks if all images in all slides are finished loading
                base.imagesLoaded( function($images, $proper, $broken) {
                    var $loading = globals.$pixslider.find('.loading');


                // bind transitionEnd on $loading element
                // PROBLEM : This calls alert('test') which is supposed to be called after adjusting $pixslider height
                    $loading.css('opacity', 0).one( transitionEnd, function() {
                        base.loadActiveSlide();
                    });
                });
            };

            base.loadActiveSlide = function() {
                var $active = globals.$activeSlide;

                // adjust $pixslider height depending on active slide's height
                globals.$pixslider.height( $active.height() );

                // bind transitionEnd on $pixslider element
                globals.$pixslider.one( transitionEnd, function() {
                    // PROBLEM : This gets called on end of loadings transitionEnd
                    alert('test');
                });

            };

我正在使用 jquery 的 .one() 方法来监听 transitionEnd 一次，因为如果我使用 .bind() 或 .on() 它会被调用几次。

问题是 alert('test') 在 $loading 元素的 transitionEnd 上被调用，这不是我想要的，因为我希望它发生在 $pixslider 元素的 transitionEnd 上。

我是不是对 .one() 方法一无所知，还是这是 transitionEnd 事件的常见问题？

我正在使用 modernizr 方式嗅探事件:

var transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd otransitionend',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    }, transitionEnd = transEndEventNames[Modernizr.prefixed('transition')];

Answer 1

这不是 .one 的问题。您只需要在事件对象触发时检查它的属性。此外，还有一种无需 modernizr 的更快、更灵活的方法。只写:

globals.$pixslider.one('webkitTransitionEnd OTransitionEnd transitionend', function(event) {
    console.log(event);
    console.log(event.currentTarget);
    // some conditional logic depending on which element is firing the event
});

此外，我很确定不需要 MSTransitionEnd，因为 IE9 不支持转换，而 IE10 支持不带前缀的转换。 Modernizr 在这一点上是错误的。我已经向他们提交了工单