javascript - vue 전환 효과 클래스 이름의 CSS 전환 순서

Question

요소에 대한 전환을 디자인합니다. 이상적인 효과는 높이가 나타날 때 증가하고 사라질 때 감소한다는 것입니다.
설계된 코드는 다음과 같습니다.

으아아아

결과 요소가 나타날 때 높이가 바로 100px에 도달하고, 사라질 때 코드를 수정하는 순서는 다음과 같습니다.

으아아아

왜 순서가 영향을 미치는지 이해가 안 가네요. CSS를 전환하면 전환 효과가 나타나는 것 아닌가요?
특정 효과에 대한 jsbin을 보려면 클릭하세요

Answer 1

@CRIMX의 답변에 따르면 기본적으로 enter와 enter active 두 클래스가 첫 번째 프레임에서 애니메이션 요소에 동시에 존재하고 Enter 클래스를 제거하여 애니메이션이 실행됩니다. 활성 클래스의 내용을 미리 적용할 수 없습니다.

two-class 방식으로 애니메이션을 완성하는데는 충분하지만 사실 이해가 쉽지 않아서 vue 2.1.8부터 애니메이션의 종료 상태를 active 클래스와 구분할 수 있는 to라는 클래스 이름을 추가하기 시작했고, 순차적 적용 범위 문제를 더 쉽게 이해하고 방지할 수 있습니다.

Answer 2

요소가 삽입되면 v-enter와 v-enter-active가 동시에 적용됩니다. 전자는 다음 프레임에서 제거되고 후자는 애니메이션이 완료된 후 제거됩니다. 따라서 v-enter-active를 먼저 작성해야 합니다. 휴가도 마찬가지다.

Answer 3

정말 이상하네요. 다음에 액티브로 쓸 땐 앞에 쓰고 전문가의 설명을 기다리겠습니다

Answer 4

공식 웹사이트에서 매우 자세한 설명을 보실 수 있습니다: https://cn.vuejs.org/v2/guide/transitions.html#过渡的-CSS-类名