요소가 애니메이션되고 있는지 확인 CSS3

Question

요소가 애니메이션으로 적용되는지 확인하는 방법이 있습니까?

하지만 jQuery의 애니메이션과 하지 애니메이션되고 있지만, CSS3의 전환과 ..

I는 한 문제 ... 나는 줄을 클릭 화살표,이 슬라이더를해야 함

left = left+200 

왼쪽 중 하나

element.position().left 

또는

입니다

parseInt(element.css("left")); 

(그것이 진짜 문제가되지 않는 문제가 발생하거나) 요소는 이전에 다시 다음

transition: left 400ms ease-in-out; 

화살표 사용자가 클릭 한때

과 함께 애니메이션되는

애니메이션이 끝나면 왼쪽은 위치에 따라 값을 반환합니다 (예를 들어 .. 400px 대신 애니메이션의 중간에 클릭되었으므로 235.47px를 반환 할 수 있음).

Answer 1

요소의 left 속성을 변경하면 , 당신은 ab 예를 들어 data()을 사용하여 oolean 값을 입력하고 true으로 설정하여 전환이 시작되었음을 나타냅니다. 그런 다음 브라우저에 따라 달라지는 transition end event에 바인딩하고 처리기에서 부울 값을 false으로 다시 설정하여 전환이 완료되었음을 나타낼 수 있습니다.

최종 결과

은 같은 것입니다 : (. 한 번 실행하는 데에만 위의 코드를 참고)

yourElement.on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", 
    function() { 
     $(this).data("transitioning", false); // Transition has ended. 
    } 
); 

을

---

if (!yourElement.data("transitioning")) { 
    // No transition active, compute new position. 
    var theNewLeft = yourElement.position().left + 200; 
    // Set new position, which will start a new transition. 
    yourElement.data("transitioning", true).css("left", theNewLeft); 
}