CSS 애니메이션 최적화

Question

Can I 애니메이트 오브젝트를 표시 할 필요가 없을 때 (보기 포트에 없음) CSS 애니메이션이 실행되지 않도록하려면? 감사합니다.

Answer 1

개체가보기 포트에있는 것을 감지 할 수 있으면 애니메이션 설명과 함께 CSS 클래스를 추가/제거 할 수 있습니다. 뭔가 같은 :

// the css class to be added/removed 
.animationClass 
{ 
     animation: someAnimation 5s; 
    -moz-animation: someAnimation 5s; /* Firefox */ 
    -webkit-animation: someAnimation 5s; /* Safari and Chrome */ 
    -o-animation: someAnimation 5s; /* Opera */ 
} 

// the jQuery code 
if(isObjectInViewPort() == true){ 
    $('.someObject').addClass('animationClass'); // note that there is no dot before 'animationClass' 
    // or remove it $('.someObject').removeClass('animationClass'); 
} 

까다로운 부분은 더 이상 볼 포트에 개체가 없는지 확인하는 것입니다. 내 의견으로는, 객체가 뷰 포트에 있는지 그리고 애니메이션을 막는 것이 CSS 애니메이션이 가볍고 잘 작동하기 때문에 좋지 않은 것보다 더 해를 끼칠 것이라는 것을 끊임없이 점검한다.