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