javascript - 调用不同的CSS transitionEnd事件

我正在使用CSS过渡为该代码的此特定部分设置Slider内的两个Elements的动画。
一个是加载图像（gif），另一个是滑块。

由于有两个元素可以通过过渡设置动画，所以我想听两个不同的transitionEnd事件。一个用于加载图像，另一个用于滑块。

我目前正在使用此代码：

 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（），它会被多次调用。

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

我是否没有获得有关.one（）方法的信息，或者这是transitionEnd事件的常见问题？

我正在使用现代的嗅探事件的方式：

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

最佳答案

.one没问题。您只需在事件对象触发时检查其属性。此外，还有一种更快，更流畅的方法，无需使用现代工具。写吧：

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在这方面是错误的。我已经向他们提交了罚单