javascript - vue transition effect css transition order of class names

Question

Design a transition for an element. The ideal effect is that the height increases when it appears and decreases when it disappears.
The designed code is as follows:

.collapse-enter-active, 
.collapse-leave-active {
  transition: height .5s;
}
.collapse-enter, 
.collapse-leave-active {
  height: 0;
}
.collapse-leave {
  height: 100px;
} 
.collapse-enter-active {
  height: 100px;
}

When the result element appears, the height directly reaches 100px. When it disappears, it is normal. The order of modifying the code is as follows:

.collapse-enter-active, 
.collapse-leave-active {
  transition: height .5s;
}
.collapse-enter-active {
  height: 100px;
}
.collapse-enter, 
.collapse-leave-active {
  height: 0;
}
.collapse-leave {
  height: 100px;
}

The problem is solved. I don’t understand why the order has an impact. Isn’t the transition effect achieved by switching css? It shouldn’t be an overlay problem, right?
You can click to view the specific effect jsbin

Answer 1

@CRIMX’s answer has made it clear. Essentially, the two classes enter and enter active will exist on the animated element at the same time in the first frame, and then the animation will be executed by removing the enter class. Therefore, the style of the active class cannot be made to take effect in advance. .

Although the two-class method is enough to complete the animation, it is really not easy to understand, so vue 2.1.8 began to add the class name of to, which can separate the end state of the animation from the active class, making it easier to understand and avoid generating Sequential coverage issues.

Answer 2

When the element is inserted, v-enter and v-enter-active are effective at the same time. The former is removed in the next frame and the latter is removed after the animation is completed. So v-enter-active should be written first. The same goes for leave.

Answer 3

This is really strange. Next time I write active, I will write it in front and wait for the experts to explain it

Answer 4

You can take a look at the explanation given by the official website, which is very detailed: https://cn.vuejs.org/v2/guide/transitions.html#Transitional-CSS-Class Name