0

我正在使用 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()，它会被多次调用。

问题是 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')];
4

1 回答 1

0

这不是问题.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 在这方面是错误的。我已经向他们提交了一张票

于 2013-07-18T19:33:40.530 回答