왜이 CSS Translate3d 애니메이션 Janky입니까?

하드웨어 가속 속성 인 transform: translate3d();을 사용하여이 CSS 전환의 성능이 원활하게 작동하지 않는 이유를 알 수 없습니다. 요소가 절대적으로 배치 되었기 때문에 아마도? 나는 어떻게 해결하는 이유왜이 CSS Translate3d 애니메이션 Janky입니까?

CodePen Link

누군가가 나에게 설명시겠습니까 ... 몰라? Chrome의 개발 도구 -> 타임 라인을 사용하고 기록한 다음 화면을 클릭하여 애니메이션을 실행하면 나쁜 성능을 볼 수 있습니다.

다음은 내 dev 도구의 스크린 캡입니다.

출처

2016-10-28 danielmesh

로의 전환을 설정하십시오. 초기 상태에서 가로 스크롤 막대를 볼 수 있습니다. 다음 코드를 추가하여 다시 그리기 및 스크롤을 트리거하지 않도록하십시오.

.columns { 
    overflow:hidden; 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

출처

2016-10-28 23:16:17

이렇게하면 성능이 크게 향상되었습니다. 이제는 생각해 보았습니다. 거기에 여러 개의 다시 그리기가 발생하여 스크롤 막대를 추가한다는 사실을 놓쳤다. – danielmesh

나는 그것이 당신이 사용하고 여유 특성과 관련이있을 수있다 생각합니다. 쉽게 아웃 귀하의 열이 문서 흐름에서 분리되지 않습니다

col { 
    transition: transform 0.5s ease-out; 
}

출처

2016-10-28 22:45:51 Ryan

도움을 주겠지 만 트릭을하지는 않았지만 여전히 동일한 FPS 프로파일을 사용했으며 '선형'및 기타 여유 방법을 사용해 왔습니다. – danielmesh

여기에 방망이가 있지만 CSS 애니메이션 (https://davidwalsh.name/translate3d)을 다듬기위한 또 다른 참조를 찾았습니다. 도움이 될지 모르겠지만 한 번 할 가치가 있습니다. – Ryan

좋은 트릭이긴하지만, 필자가 이미 col 요소에'translate3d'를 정의한 경우에는 필요하지 않습니다. 그 자체의 하드웨어 가속 레이어에 붙어 있으므로 다른 속성이 필요하지 않습니다. – danielmesh

몇 가지 할 수있는 일. 당신이이 지속적으로 변경 될 예정 알고 당신이 많은이없는 경우

을 추가 할 수 있습니다 :

will-change: transform;

당신의 .columns .col 규칙에. (read about will-change here)

또한 변환시 ease을 ease-in-out으로 변경하십시오.

마지막으로 페이지 크기가 하드 귀하의 경우이 문제를 해결하는 가장 간단한 방법을 재립니다 강제하는 변화하면 스타일이를 추가하는 것입니다

여기

body{ 
    overflow: hidden; 
}

가 codepen with all of those applied이다.

출처

2016-10-28 23:35:22 Ryan

오버플로가 성능에 가장 큰 영향을주었습니다. 스크롤이 추가되었다는 사실을 놓쳤습니다. 어리석은 나를 보내 주셔서 감사합니다. – danielmesh

왜이 CSS Translate3d 애니메이션 Janky입니까?

답변

관련 문제