Vue transitions and animation

1. The CSS transitions

Transitions in CSS represent a transition process, which is simply an animation transition process.

1.1 Transitional Usage of the CSS

The transition system is a feature that Vue provides for DOM animation effects. It can trigger CSS transitions and animations when inserting and removing from the DOM. That is, you add a specific class name to the DOM as it changes.

Several transition elements

Place the transition elements in the tag and add.v-xxx to the style tag

  • V-enter: Defines the start state of the transition, which takes effect before the element is inserted and is removed in the next frame after the element is inserted.
  • V-enter-activate: Defines the state in which the transition is activated. This class can be used to define the time, delay, and curve functions in the transition before the element is inserted and after the transition is complete.
  • V-enter -to: defines the end state of the transition. It takes effect when the v-Enter is removed and when the transition is complete.
  • V-leave: Defines the start state of the exit transition.
  • V-leave-activate: defines the status when the leave transition takes effect.
  • V-leave-to: defines the end state of the exit transition.

2. Multiple element transitions

There are two types of transition modes:

Out-of-in mode: The current element transitions first, and then the new element transitions in

In-out mode: The new element transitions first, and the current element transitions away after completion

<transition name="xxx" mode="out-in"></transition>

3. The animation

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title>Vue use transition and animation </title> <script SRC =".. /.. /easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> <link rel="stylesheet" Href = "https://cdn.bootcss.com/animate.css/3.5.2/animate.css" > < style >, fade - enter,. Fade - leave - to {opacity: 0; } .fade-enter-activate, .fade-leave-activate{ transition:opacity 3s; } </style> </head> <body> <div id="app"> <transition type="transition" name="fade" appear enter-active-class="animated swing fade-enter-activate" leave-active-class="animated shake fade-leave-activate" appear-active-class="animated swing"> <div v-if="show">Hi Shelgi</div> </transition> <button @click=" click "> </div> <script> var vm=new Vue({ el:"#app", data: { show: true, }, methods:{ Click:function(){ this.show=! this.show } } }) </script> </body> </html>Copy the code

Click to see the transition animation

Of course, you can rely on CSS animation library, also can rely on JS animation library

  • Keyframes: Animation library of the CSS
  • Animate. CSS: An animation library for CSS
  • Velocity.js: an animation library for js

conclusion

Transition animation can be implemented in three ways:

  • Use Vue tags with CSS styles to complete the animation
  • Use Animate. CSS to Animate
  • Use the hook function in Vue to achieve animation