CSS 전환을 사용하여 동일한 방향에서보기로 전환 내용

Question

<divs> 두 개의 '페이지'중 하나를 미끄러지려고합니다. 예를 들어, 다른 페이지가 미끄러지면서 한 페이지가 미끄러지는 것을 볼 수있는 부드러운 전환이 가능합니다. 내 마지막 응용 프로그램에서 전환은 내 백엔드에서 시작될 것입니다 (아마도 WebSocket 메시지를 사용하여).

페이지를 왼쪽에서 밀어 넣으면 효과가 '반복'됩니다. 즉, 첫 페이지로 돌아 가면 왼쪽에서 계속 슬라이드됩니다.

원하는 효과를 얻기 위해 현재 CSS3 전환 사용 계획을 보여주는 스 니펫을 만들었습니다. 그것은 작동하지만 매우 clunky 느낌. 뷰

#page1 시작하고 #page2가 각각 in-frame 및 out-of-frame 클래스의 사용을 통해 그 폭에 의해 수평 위치 오프셋을 가지고있어 다음과 같이

그것은 동작한다.

는 #page1 전환 #page2에, 나는 단순히 전환 효과를 처리하는 자신의 폭에 의해 모두 '페이지'와 page 클래스의 전환 속성의 위치를 ​​변경하는 transform:translateX()를 사용하는 .slide 클래스를 적용 할 수 있습니다. 난 기다릴 루프와 같은 행동 전환이 완료 될 때까지, 그때 #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

귀하의 방법은 나에게 좋아 보인다, 여전히 당신이 변경되었는지 확인 이는에서는 setTimeout을 (사용) 및 변수를 만들 수 CSS 전환을 사용하여 다른 솔루션 다른를 허용하기 전에 딸깍 하는 소리.

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