콘텐츠를 압착하지 않고 변형으로 높이에 애니메이션을 적용하는 방법

Question

내 프로젝트에서는 사용자가 버튼을 클릭할 때 jQuery slideUp()를 사용하여 200개 항목 목록의 요소를 위로 밀어 올렸습니다. 그러나 CSS 높이 애니메이션에는 리플로우가 필요하여 애니메이션이 불안정해지는 것으로 알려져 있습니다. 애니메이션은 응용 프로그램의 필수적인 부분이므로 응용 프로그램이 원활하게 작동할 수 있도록 많은 작업을 수행할 의향이 있습니다.

CSS transform가 GPU에서 처리되고 일부 최신 브라우저에서는 메인 스레드에서도 벗어나고 과도한 JS 작업이 변환에 영향을 주지 않기 때문에 원활하게 작동하도록 하는 방법이라고 결정했습니다. (저는 JS 작업이 많습니다.)

CSS를 활용하는 방법을 찾고 있습니다. transition的巧妙解决方案：transform来复制jQuery slideUp，它只是为height属性设置动画。以下是我的尝试，但似乎 scale 和 translate 예상대로 동기화가 되지 않습니다.

으아악 으아악 으아악

값을 조금 수정하고 content 转换更改为 transform:scale(1, 3) translate(0, -50%);를 추가하여 더 가깝게 만들었습니다.

목표 달성에 매우 가까워진 것 같지만 결코 성공하지 못했습니다. 이를 수행하기 위해 미리 만들어진 트릭이 있습니까?

요구 사항:

• JS가 없는 것이 좋습니다
• 메인 스레드에서

Answer 1

며칠 밤을 자고 난 후 내 요구 사항에 완벽하게 맞는 솔루션을 찾았습니다. 세 개의 레이어를 사용해야 했어요 div 并确保内部两层设置为 height: 100%;。然后，我取消了 scale() 并使用 transform() 중간 레이어를 위로 밀어 올렸습니다.

이것은 내 요구 사항에 맞습니다:

• 사용 Transform() GPU에서 최대 60fps까지 실행되어야 합니다
• 콘텐츠를 압축하는 데 Scale()를 사용하지 않습니다
• jQuery처럼 콘텐츠가 아래에서 위로 사라집니다. SlideUp()
• 대상 요소의 높이에 관계없이 아래의 다른 요소가 위로 미끄러져 간격을 채웁니다.
• 애니메이션이 트리거되면 더 이상 JS가 관련되지 않습니다

으아아아 으아아아 으아아아