CSSトランジションを使用して同じ方向から見た遷移コンテンツ

Question

2つの「ページ」のうちの1つ、つまり<divs>を穏やかな遷移で表示すると、他のページがスライドしている間にスライドするページが見えます。私の最終的なアプリケーションでは、移行は私のバックエンドから（おそらくWebSocketメッセージで）起動されます。

ページを左からスライドし、効果を 'ループ'させたいと思います。つまり、最初のページに戻ると、それはまだ左からスライドします。

以下のスニペットを作成しました。このスニペットは、CSS3トランジションを使用して目的の効果を達成するための私の現在の計画を示しています。それは動作しますが、非常にclunky感じています。

次のように動作します。

#page1ビューの開始と#page2は、それがそれぞれin-frameとout-of-frameクラスを使用して、その幅によって相殺水平位置のしています。 #page1#page2への移行については

、私は単にそれらの幅によって、両方の「ページ」を再配置するtransform:translateX()を使用し、pageクラスの遷移特性がトランジションエフェクトを処理​​クラスを適用します。

の移行が終了するのを私は待つループのような振る舞いを行うために、私は戻って#page2の左に画面外であることに#page1をもたらすことを意図しているin-frameまたはout-of-frameクラスを持っているページを切り替えます。 しかし、この移行が遷移として実行されないようにするには、私は.notransitionクラスを適用しなければなりません。

私の質問：CSSトランジションを使用してこの動作を実現するには、より良い方法がありますか？

私はブートストラップのカルーセルが私のためにそれを行うことができると知っていますlike thisしかし、私が間違っているかどうかを知ることはうれしいでしょう。

// add transition finished handler to each page 
 
$('.page').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
 
    // toggle in/out of frame 
 
    $(this).toggleClass('in-frame') 
 
    .toggleClass('out-of-frame') 
 
    .addClass('notransition') 
 
    .removeClass('slide') 
 
}) 
 

 
$('body').click(function() { 
 
    // start transform 
 
    $('.page').removeClass('notransition').addClass('slide') 
 
})

html, 
 
body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    font-size: 2em; 
 
} 
 

 
#content { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 

 
.page { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    -webkit-transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1); 
 
    -moz-transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1); 
 
    -o-transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1); 
 
    transition: transform 2s cubic-bezier(0.19, 1, 0.22, 1); 
 
} 
 

 
.slide { 
 
    -webkit-transform: translateX(100%); 
 
    -moz-transform: translateX(100%); 
 
    -o-transform: translateX(100%); 
 
    transform: translateX(100%); 
 
} 
 

 
.in-frame { 
 
    left: 0%; 
 
} 
 

 
.out-of-frame { 
 
    left: -100%; 
 
} 
 

 
.notransition { 
 
    -webkit-transition: none !important; 
 
    -moz-transition: none !important; 
 
    -o-transition: none !important; 
 
    transition: none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <div id="page1" class="page in-frame" style="background: #d67e56;"> 
 
    Main Page <br> (Click Me) 
 
    </div> 
 
    <div id="page2" class="page out-of-frame" style="background: #d94e4e;"> 
 
    Other Page <br> (Click Me) 
 
    </div> 
 
</div>

Answer 1

あなたのやり方は私にはよさそうだ、まだCSSトランジションを使用して、別の解決策は、（のsetTimeoutを使用すること）と別のを許可する前に、あなたはそれが変更されているかどうかをチェックし、変数を作成することができますクリック。

//set a variable 
var finish = true; 
$('body').click(function() { 

    //check to see if last transition has finished 
    if(finish == true){ 

     //set variable to false 
     finish = false; 
     // start transform 
     $('.page').removeClass('notransition').addClass('slide'); 

     setTimeout(function(){ 
      finish = true; 
      $('.page').toggleClass('in-frame').toggleClass('out-of-frame').addClass('notransition').removeClass('slide') 
       } 
     ,2000); 
    } 
});