WebKit 자바 스크립트 변환 및 애니메이션

나는 아이폰 웹 응용 프로그램에서 일하고 있습니다. 나는 webkit-transform과 webkit-animation CSS 규칙을 가지고 노는 것에 열중하고있다. 몇 가지 질문이 있습니다. 예를 들어, jQuery.animate (...) 대신에 이것을 사용하면 실제 이점이 있습니까? 결과 애니메이션이 훨씬 빨라지고 빠르지는 않습니다. 의 더 나은 설명하자 다음 WebKit 자바 스크립트 변환 및 애니메이션

-webkit-transition-property: left, top, right, bottom, width; 
-webkit-transition-duration: 200ms;

나는 style.left과 스타일을 변경

: 나는 갤러리처럼 ...이처럼 각 이미지 CSS 규칙을 설정, 화면에 이동하는 일련의 이미지를했습니다 새로운 좌표로 이동하려는 각 요소의 .top. 결과는 내가 예상했던 것보다 빠르지 않다. jQuery가 (전혀 유동적이지 않아서) 더 빠르거나 빠릅니다. 나는 심지어 -webkit-animation과 -webkit-transform을 보았다. 그러나 나는 그것들을 올바르게 사용하는 방법을 여전히 이해하지 못한다. 요소가 주변에 이동하지만 애니메이션없이이 함께

var trans = "translate(" + x + "px," + y + "px)"; 
ELEMENT.style.webkitTransform = trans;

: 첫 번째는 다음 코드를 사용하여 내 주위에 물건을 이동할 수 있습니다,하지만 애니메이션을 생성하지 않습니다. 나는 동적으로 애니메이션 만드는 경우 :

var lastSheet = document.styleSheets[document.styleSheets.length - 1]; 
lastSheet.insertRule("@-webkit-keyframes "+ "animX" + "{ from { top: "+oy+"px; left:"+ox+"px;} to {top: " + y + "px; left: " + x + "px; } }",lastSheet.cssRules.length); 
ELEMENT.style.webkitAnimationName = "animX";

이 방법 요소가 그리 fludly, 한 번 이동하고 오래된 위치의에 잘 돌아. 이 코드를 반복해도 아무런 결과가 나오지 않습니다.

당신이 생각하기에, 그것들을 사용했을 때의 움직임의 유동성 측면에서 실제 이점이 있습니까? 그리고 그렇다면 제대로 사용하는 방법은 무엇입니까?

출처

2010-07-23 gotch4

이런 식으로 뭔가 당신이 원하는 일을, 내 아이폰 4에 Safari에서 매우 원활하게 실행해야합니다

<style type='text/css'> 

    #element { 

     position: absolute; 
     top: 0px; 
     left: 0px; 
     -webkit-transition-property: top, left, bottom, right; 
     -webkit-transition-duration: 300ms; 
     -webkit-transition-timing-function: ease-in; 

    } 

</style> 

<script type='text/javascript'> 

    document.querySelector('#element').style.left = '300px'; 

</script>

출처

2011-02-04 18:10:44

WebKit 자바 스크립트 변환 및 애니메이션

답변

관련 문제