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

问题是在$ load元素的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')];

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支持它们没有前缀。 Modernizr在这方面是错误的。我已经向他们提交了一张票

调用不同的CSS transitionEnd事件

1 个答案: