HTML5와 CSS3가 점차 주류가되었을 때, 나는 간단한 애니메이션을 만들기 위해 JS를 사용하는 데 매우 익숙합니다. 데스크탑 브라우저에서 모두 CSS3를 지원하는 것은 아닙니다. 사용자도 매우 이상합니다. 모든 사용자가 재배 할 수있는 것은 아닙니다. Win7.win8이 XP만큼 유용하지 않다고 생각하는 사람들은 항상 많은 사람들이 있습니다. 그러나 휴대폰은 매우 다르며 모바일 브라우저는 HTML5 및 CSS3을 매우 잘 지원합니다. 그러나 휴대 전화의 하드웨어 처리 기능은 매우 제한적입니다. 오늘날 쿼드 코어 및 옥타 코어 휴대 전화가 만연 할 때, 나와 같은 듀얼 코어 또는 단일 코어 휴대 전화를 사용하는 사람들이 여전히 있습니다. JS는 좋지만, 나는 당신과 많은 접촉을하지 않기 때문에 그 느낌을 잘 조정할 수 없습니다. 간단한 페이지 스 와이프는 i7 PC에서 매우 매끄럽게 실행되지만 듀얼 코어 전화에서 갇혀, 말더듬, 말더듬, 말더듬, 말더듬됩니다. 매우 우울합니다. 이런 이유로, 나는 또한 오랫동안 검색하고 많이 읽었습니다. 마지막으로, 정착하기 전에 비교적 간단한 방법을 찾았습니다. CSS3를 사용하여 애니메이션을 실행하십시오.
과거에는 애니메이션과 같은 jQuery의 애니메이션 기능 외에도 Settimeout 및 SetInterval을 사용하여 요소의 마진, 너비, 상단 및 기타 속성을 변경하기 위해 루프했습니다. 이것이 나를 혼란스럽게 만드는 것은 바로 이것이 바로 이것이 바로 이것이 바로 이것입니다.
우선, Settimeout, SetInterval은 0ms를 설정하여 항상 실행할 수 없습니다. 나는 iscroll에서 디버깅하는 동안 실수 로이 비밀을 발견했습니다. 타이머 지연 계산은 브라우저의 내장 시계에 의존하며 시계의 정확도는 클록 업데이트의 빈도에 따라 다릅니다. IE8과 이전 IE 버전 간의 업데이트 간격은 15.6 밀리 초입니다. 끝났습니다. 10ms에서 1px 변위를 수행한다고 생각하며 제 시간 에이 작업을 수행 할 수 없습니다.
그리고 카드로 무슨 일이 일어나고 있습니까? 코드가 잘 작성되지 않았기 때문에 카드. 결국, JS는 단일 스레드이며, 일단 시간이 많이 걸리는 동작이 있으면 UI가 응답하지 않을 수 있습니다. 우리는 settimeout을 사용했지만 인터페이스가 죽지 않은 것처럼 보이게하는 Settimeout이 정확하게 이루어지기 때문입니다. 이번에 설정 타임 아웃 실행 후 다음 실행 전에 중간 간격으로 다른 시간 소모적 작업이 발생할 수 있으므로 Settimeout의 실행은 무제한이됩니다. 그럼 뭐? 카드! 그러나 원래 속성을 변경할 때 카드가 실수로 브라우저 레이아웃 (예 : 릴레이)을 트리거 할 수있는 또 다른 이유가 있습니다. 이 질문은 시간이 많이 걸리지 만 시간이 많이 걸립니다. 시간이 많이 걸리지 만 종종 무시할 수 있습니다. 그러나 여러 번 무시할 수 없습니다.
위의 두 단락 외에도 또 다른 문제, 즉 많은 휴대 전화에서 항상 프레임별로 프레임 인 것처럼 느껴지고 프레임별로 길고 짧을 수도 있습니다. 이것은 모든 사람을 망칠 수있는 리듬입니다. 왜 이런 일이 일어나고 있습니까? 여전히 설정 타임 아웃 지연과 관련이 있습니다. 프레임 폐기. 이 문제에는 모니터의 새로 고침 빈도가 포함됩니다. 너무 복잡합니다.
마지막으로, CSS3을 선택하고 JS는 요소의 속성을 동적으로 변경했으며 전환을 사용하여 애니메이션 실행 시간을 제어했습니다. 예를 들어:
코드 사본은 다음과 같습니다.
<div id = "test"style = "전환 : 모든 1s 편의; 너비 : 100px;" >/div>
JS :
코드 사본은 다음과 같습니다.
$ ( "#test"). 너비 (200);
이런 식으로, 1 초 후에,이 div의 너비는 200px가됩니다. Sun Wukong이 순식간에 더 커지는 것과는 달리, 그는 갇히거나 멈추지 않고 천천히 발을 서두르고 있습니다. 그리고 CSS 애니메이션을 사용하는 데 이점이 있으며, 시간이 많이 걸리는 JS의 영향을받지 않습니다. UI 스레드와 JS 스레드는 브라우저에서 상호 배타적이지만 CSS 애니메이션에는 유효하지 않으며 많은 브라우저가 하드웨어 가속도 (예 : Chrome)를 활성화 할 수 있습니다. 일반적인 상황에서는 브라우저 재 층이 분명하지 않지만 대규모 재 층을 피해야합니다. 따라서 -webkit -transform : translatez (0); 또는 -webkit -transform : translate3d (0,0,0); 브라우저 가이 레이어를 독립적으로 렌더링합니다. 재 층이 불가피하더라도 해당 지역은 더 작습니다. 실제로 마진을 대체하기 위해 사용하는 것은 매우 현명한 결정입니다.
마지막으로 몇 가지 일반적인 변경 사항이 중계 속성을 트리거합니다.
코드 사본은 다음과 같습니다.
너비
키
심
여유
표시하다
국경비
국경
최소층
위는이 기사에 설명 된 모든 내용입니다. 모든 사람이 JavaScript와 CSS3을 배우는 것이 도움이되기를 바랍니다. 동시에, 몇 가지 단점을 추가하고 이해하십시오.