내 프로젝트에서는 사용자가 버튼을 클릭할 때 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가 없는 것이 좋습니다
• 메인 스레드에서