슬라이드 애니메이션은 파이어 폭스에서는 잘 작동하지만 크롬에서는 더듬 거리는 소리가납니다.

Question

나는 div의 왼쪽, 위 또는 오른쪽에있는 다른 div로 버튼을 클릭 할 때 화면 밖으로 밀어 내면 가운데 div가있는 웹 사이트를 구축하고 있습니다. 페이지.

왼쪽, 위 및 오른쪽 div는 jquery ajax를 사용하여로드되고 css3을 사용하여 애니메이션됩니다.

http://www.uvm.edu/~areid/homesite/index.html

가 크롬과 파이어 폭스에 왼쪽 눈을 클릭하십시오 : 여기

내가 무슨 말을하고있는 페이지입니다. Firefox에서는 애니메이션이 부드럽지만 크롬에서는 더듬 거리는 것을 볼 수 있습니다.

왜 이런 일이 일어날 지 아는 사람이 있습니까?

잠재적으로 웹 사이트의 속도를 높이고 전환을 부드럽게 처리 할 수있는 방법을 알고 있는지 궁금합니다. 어떤 도움

덕분에 너희들이있을 수 있습니다

가장,

케이티

Answer 1

내가 크롬에서 어색함을 명확하게 볼 수 있습니다.

브라우저에서 다른 일을 많이하는 경우 CSS3 애니메이션이 원활하게 실행되지 않습니다. 이들이 얼마나 원활하게 실행되는지는 당신이 동시에 무엇을하려고하는지, 브라우저의 내부 구현이 어떻게 처리하는지에 달려 있습니다.

환상적인 CSS3 전환을 사용하는 CSS3 슬라이드 쇼에 대한 경험으로, 원활하게 실행되도록하는 가장 좋은 방법은 애니메이션을 원활하게 실행하려는 동시에 코드로 중요한 일을하지 않는 것입니다. 다음은 부드러운 실행의 기회를 극대화 할 수있는 몇 가지 방법입니다.

1. 애니메이션 작업 중에 필요할 수있는 사전로드 리소스.
2. 애니메이션 실행 중에는 자바 스크립트 기능을 사용하지 마십시오.
3. 애니메이션 중에 이미지로드를 피하십시오.
4. 애니메이션 후에 실행하려는 작업의 경우 애니메이션의 완료 기능을 통해 작업을 트리거합니다 (애니메이션이 끝날 때까지 시작되지 않음).
5. 애니메이션을 완성 할 때 준비하고 준비된 것을 원한다면 애니메이션을 시작하기 전에 먼저 빌드하고 애니메이션을 시작하기 전에 숨겨져있을 준비가되어 있어야합니다.
6. 애니메이션 중에 DOM을 수정하지 마십시오 (특별히 애니메이션에 필요한 것 제외).

페이지에서 특히 슬라이드 전환시 불안감이 발생하지만 슬라이드하는 것과 동시에 슬라이드가 표시되는 새 콘텐츠를로드하려고합니다. 새 콘텐츠를로드하고 표시하는 것이 슬라이드 전환의 저해에 기여할 가능성이 큽니다. 슬라이드를 시작하기 전에 새 콘텐츠를로드하기 전에 또는 슬라이드를 시작하기 전에 새 콘텐츠를 미리로드 할 때까지 기다리는 것이 좋습니다. 일부 브라우저는 브라우저가 네트워크를 통해 이미지를로드하는 경우에도 CSS3 전환에서 얼간이가된다는 것을 발견했습니다.