Examples of CSS transition effect of web Front-end vue, web Front-end vuecss

Examples of CSS transition effect of web Front-end vue, web Front-end vuecss

The importance of transition effect in interactive experience is self-evident. In the past, we used js or Jquery to add or remove elements of classes, combined with the styles defined in CSS, and then reference some javascript libraries, which can be very complex, amazing dynamic results, but this method is too cumbersome.

Vue. js has a built-in transition system that can automatically apply the transition effect when elements are inserted or removed from the DOM. Vue will trigger css transition or animation when it is a party. You can also provide the corresponding javascript hook function to execute custom DOM operations during the transition process.

The transition feature must be used on the target element for each transition effect.

<Div v-if = "show" transition = "my-style"> display </div>

The transition feature can be used with the following commands:

1. v-if 2. v-show 3. v-for 4. Dynamic Components

You can find other commands or resources on your own.

The complete code example is as follows:

<Div v-if = "show": transition = "expand"> </div> // expand must be defined in advance. The style after expand must be used (key) <transition name = "expand"> <div v-if = "show"> display </div> </transition> can also be nested. expand-transition {// required to write transition: all. 3 s rows; height: 30px; padding: 10px; background-color: # eee; overflow: hidden ;}. expand-enter {// start to enter the transition. The element is inserted to take effect. transition: opacity. 5 s ;}. fade-leave-active {// opacity: 0 ;}

Of course, there must be an ending state at the beginning. In fact, there are four (CSS class) names that are switched in the enter/leave state.

1. v-enter: defines the starting state of transition, which takes effect when an element is inserted and is removed from the next frame.

2. v-enter-active: defines the end state of the transition, which takes effect when the element is inserted and is removed after transition/animation is completed.

3. v-leave: defines the Starting Status of the exit transition. It takes effect when the exit transition is triggered and is removed from the next frame.

4. v-leave-active: defines the Starting Status of the exit transition. This parameter takes effect when the exit transition is triggered and is removed from the next frame.

Based on the above four states, you can write a complete transition effect of css. For example, it is cool to drag the page from the left of the window into the site?

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.