CSS 변환이 렌더링되지 않는 이유는 무엇입니까?

Question

페이지를 위아래로 스크롤 할 때 X 축에서 회전하는 상자를 만들었습니다.

$(window).scroll(function (event) { 
    clearTimeout(timeout); 
    timeout = setTimeout(finish_rotation, delay); 
    scroll = $(window).scrollTop() * 2; 
    animate_rotation(); 
}); 
function animate_rotation(){  
    var translate = 'rotateX(' + scroll + 'deg)'; 
    $('.flipper').css('transform', translate); 
} 

스크롤을 멈 추면 가장 가까운 180의 배수로 회전이 완료되어 회전이 완료됩니다. 이것은 finish_scroll에서 수행됩니다.

function finish_rotation(){ 
    var goal_rotation = 180*Math.ceil(scroll/180); 
    while(scroll < goal_rotation){ 
     scroll++; 
     animate_rotation(); 
    } 
} 

문제는 실제로 회전의 나머지 부분을 움직이지 않고 끝난 위치로 이동한다는 것입니다. finish_rotation의 while 루프에서 animate_rotation이 각 반복마다 호출되고 있음을 확인할 수 있지만 애니메이션이 왜 발생하지 않는지 알 수는 없습니다. 애니메이션이 너무 빠르거나 너무 가까워서 스크롤 증가량을 변경하고 각 animate_rotation 호출에 setTimeout을 추가하려고 시도했지만 모든 단계가 애니메이션으로 처리되지는 않을 것이라고 생각했습니다. 왜 모든 애니메이션이 재생되지 않습니까? 여기에 작업 예를 점검 들어

: JSFiddle

편집 : 반전 위로 스크롤 아래로 수용 할 수 있도록 내가 바이올린을 업데이트 한. 이 변경은 변환 문제를 변경하지 않으므로 가독성을 위해 코드를있는 그대로 그대로 두겠습니다.

Answer 1

기능이 너무 빨라서 finish_rotation() 기능이 마무리 위치로 이동하는 것처럼 보입니다. 애니메이션을 보려면 루프에서 시간 초과를 설정해야합니다. 아무것도이 페이지로 렌더링되기 전에 처리를 완료 할 수 있도록

function finish_rotation(){ 
    var goal_rotation = 180*Math.ceil(scroll/180); 

    setTimeout(function(){ 
     scroll++; 
     animate_rotation(); 
     if (scroll < goal_rotation) 
      finish_rotation(); 
    }, 10); 
} 

Updated JsFilled here

Answer 2

while 루프가 동기 : 여기

이를 수행하는 방법의 일례이다.

이 finish_rotation 기능을 사용하여 고려하십시오

function finish_rotation() { 
    var goal_rotation = 180*Math.ceil(scroll/180); 
    $('.flipper').css({ 
     "transition" : "transform "+((goal_rotation-scroll)*10)+"ms linear", 
     // Adjust that *10 as needed for your desired speed 
     "transform" : "rotate("+goal_rotation+"deg)" 
    }).one("transitionend",function() { 
     $(this).css({"transition":""}); 
    }); 
} 

당신은 전환이 여전히있는 동안, 그렇지 않으면 스크롤의 transitionend 이벤트를 바인딩을 해제하고뿐만 아니라 transition 속성을 제거하려면 window.scroll 블록에 추가 코드를 추가해야 할 수도 있습니다 진행으로 인해 문제가 발생할 수 있습니다.