0

CSS トランジションを使用して、コードのこの特定の部分の Slider 内の 2 つの要素をアニメーション化しています。1 つは読み込みイメージ (gif) で、もう 1 つはスライダーです。

遷移によってアニメーション化される要素が 2 つあるため、2 つの異なる transitionEnd イベントをリッスンしたいと考えています。1 つは読み込みイメージ用で、もう 1 つはスライダー用です。

私は現在このコードを使用しています:

 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');
                });

            };

.bind() または .on() を使用すると複数回呼び出されるため、jquery の .one() メソッドを使用して transitionEnd を 1 回リッスンします。

問題は、 $pixslider 要素の transitionEnd で発生させたいので、 $loading 要素の transitionEnd で alert('test') が呼び出されることです。

.one() メソッドについて何も得られないのですか、それとも transitionEnd イベントでよくある問題ですか?

イベントをスニッフィングするためのmodernizrの方法を使用しています:

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

1 に答える 1