在不同的CSS transitionEnd事件上调用

Question

我正在使用CSS转换来为代码的这一特定部分在Slider中设置两个元素的动画。一个是加载图像(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()，它会被调用多次。

问题是警报(‘transitionEnd’)在$loading元素的测试上被调用，这不是我想要的，因为我希望它发生在$pixslider元素的transitionEnd上。

我是不是没有得到关于.one()方法的一些信息，或者这是transitionEnd事件中的一个常见问题？

我使用了一种现代化的方式来嗅探事件：

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

Answer 1

这不是.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支持无前缀转换。在这一点上，现代是错误的。我已经向他们提交了罚单