2

.animate-outflexsliderが次のスライドにアニメーション化する前に、スライドのすべての要素にクラスを追加しています。問題は、flexsliderがすぐに次のスライドに移動するため、適用されたcssアニメーションが表示されないことです。

スライダーをアニメーション化する関数内で呼び出されるflexsliderのbefore()コールバック関数を使用してクラスを追加しているので、スライダーを一時停止するために使用するには遅すぎます（これを使用すると次のスライドが一時停止します）。slider.pause()

javascriptの実行を一時停止するコールバック関数alert()内を使用してアニメーションをすでにテストしました。によって追加されたcssアニメーションを確認できます。before().animate-out

スライダーのアニメーション化を停止する方法はありますか（slide.flexAnimate()後で手動でアニメーション化するために使用します）？そうでない場合は、スライドを遅らせる方法はありますか？これがGithubのコードです。

4

2 に答える 2

5

現在、cssアニメーションを表示するためにアニメーションを遅らせる唯一の方法は.delay()、現在のスライドとアニメーション化するスライドで使用することです。

before: function(slider) {
        // TODO: check if the browser supports css animations before delaying the slides

        // delay slide fadeOut to show the css animations
        slider.slides.eq(slider.currentSlide).delay(1000);

        // delay slide fadeIn until the animations on the prev slide are over
        slider.slides.eq(slider.animatingTo).delay(1000);

}

このコードを使用した理由を知るには、次のようなフェードアニメーションのスライダーコードを確認できます。

if (!touch) {
       slider.slides.eq(slider.currentSlide).fadeOut(vars.animationSpeed, vars.easing);
       slider.slides.eq(target).fadeIn(vars.animationSpeed, vars.easing, slider.wrapup);
}

スライダーオプションとして使用しています：

animation: 'fade',
animationSpeed: 0;

これが誰かに役立つことを願っています。

于 2013-03-26T08:45:45.110 に答える
2

スライダーを一時停止せずに目的の効果を得る別の方法があります。これは、「スライド」に設定されたアニメーションでも機能します。

この例では、各遷移の期間は500ミリ秒であると想定しています。それに応じて、パラメータを遷移速度に合わせて調整します。

まず、スライドコンテナに遷移遅延を設定します（CSS3を介してflexsliderによってアニメーション化されます）。

.flexslider .slides {
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s
}

秘訣は、flexsliderが提供する「.flex-active-slide」クラスを使用してトランジションを構築するのではなく、flexslidersのコールバックを介してそのクラスをスライド要素に適用するだけで独自のトランジションクラスを使用することです。

start: function(slider) {
    slider.slides.eq(slider.currentSlide).addClass('flex-active-transition');
},
before: function(slider) {
    slider.slides.eq(slider.currentSlide).removeClass('flex-active-transition');
},
after: function(slider) {
    setTimeout(function() {
        slider.slides.eq(slider.currentSlide).addClass('flex-active-transition');
    }, 700);
}

これにより、スライドが行われ、フェードアウトトランジションがアニメーション化され、すべてのスライドの開始前にクラスが削除された後、遅延を伴うトランジションクラス「.flex-active-transition」が追加されます。これで、すべてのCSS3トランジションにこのクラスを使用できます。

スライド自体はCSS宣言によってすでに遅延しているため、スライドアウト遷移はスライダーがスライドする前に実行されるようになりました。「アフター」コールバックのタイムアウトをフェードアウトの期間+スライド速度に設定できます。カスタムトランジションクラスによってトリガーされるフェードイントランジションは、スライドが完了した直後に実行されます。

よりスムーズなアニメーションを得るには、setTimeout遅延を短くしてみてください。これにより、スライドアニメーションとスライドトランジションアニメーションがブレンドされ、いくつかの優れたスライド効果が得られる可能性があります。

于 2013-12-02T17:42:53.937 に答える