On the understanding of the Vue.js transition CSS class name

Attach the official Document Map first.

Overall is to explain the meaning of v-enter,v-enter-active,v-leave,v-leave-active, but I looked at half a day, is not understand, always and the mouse mouseover and mouseout events associated with, after a multi-party search , finally understand, the following is what I understand the meaning, hope to be helpful to pass by, but also hope that passing can help me check and check.

Start

First, it is illustrated by an example that practice is the only criterion for testing truth.

　　

Result: Click button, Show=false, Div disappears, click again, Show=true,div with blue gradually turn orange, transition time is 3s.

Change the style to:

　　

Result: Click the button, Show=false, Div gradually from orange to blue, the transition time is 3s.

From the above two examples, the difference between V-enter and V-leave is obvious.

　　V-enter: Defines the state at which the target element disappears and then begins to appear;

　　V-leave: Defines the state of the target element when it is ready to disappear;

But the above two are all instantaneous things, like the Flash animation of a frame of content, as for the second frame to the end of the content is given to v-enter-ative and v-leave-active.

　　v-enter-active: Defines the final state (last frame) of the target element that appears in the document;

　　v-leave-active: Defines the final state of the target element when it leaves the document (the last frame), and disappears when the state is finished.

In addition, the transition effect transition is defined in the above two styles, it is no wonder that in the official document V-enter-active and v-leave-active represent a distance.

　　Note: These two styles must be defined before the corresponding v-enter or v-leave, otherwise the display is not valid.

... end

You are welcome to come and check.

On the understanding of the Vue.js transition CSS class name