CSS3 전환을 사용할 때 jQuery.animate 단계 함수에 해당합니다.

Question

CSS 전환을 사용하여 화면 주위에 원 (노드)을 움직입니다.

CSS :

.circle {-webkit-transition: all 0.8s ease-in-out; } 

JS :

$('.circle').css({ webkitTransform: "translate3d(20px, 20px, 0px)" }) 

나는 항상 번역의 특성을 알 수 있도록하고 싶습니다, 그래서 노드를 연결하는 선을 업데이트 할 수 있습니다.

jQuery 애니메이션을 사용하는 경우 "단계"기능을 사용할 수 있습니다. CSS 전환에서 비슷한 점이 있습니까? "webkitTransitionEnd"이벤트를 보았지만 개별 애니메이션 단계는 없습니다.

아니면 타이머로 처리해야합니까?

Answer 1

이론적으로 타이머를 사용하여 애니메이션 요소의 계산 된 값을 얻을 수 있지만 거의 느리게 실행되도록 보장 할 수 있습니다. 나는 계산 된 값을 단계적으로 액세스 할 필요성을 느끼지 못했고 동시에 2 개 이상의 애니메이션을 동시에 시작했습니다.

사이에 선이있는 더 복잡한 항목에 애니메이션을 적용하려면 raphael과 같은 캔버스 라이브러리를 사용하는 것이 좋습니다.

this과 같은 몇 가지 유사한 데모가 이미 있습니다.