Transition animation in vue

Transition animation in vue

Use background:

  1. Vue provides several different ways to apply transitions when inserting, updating, or removing the DOM. Includes the following tools:
    1. Automatically applied in CSS transitions and animationsclass
    2. Can be used with third-party CSS animation libraries, such asAnimate.css
  2. Vue provides encapsulated components that can add entry/exit transitions to any element and component in the following transitioncases
    1. Conditional rendering (use v-if)
    2. Conditional display (use v-show)
    3. Automatically sniffs whether the target element has CSS transitions or animations applied, and if so, adds/removes CSS class names at the right moment

step

  1. add v-iforv-show
  2. Set custom animation styles for six timings :

Six timings of animation execution

v-enter: Start entering
v-enter-active: Entering process
v-enter-to: Entering completed
v-leave: Ready to leave
v-leave-active: Leaving process
v-leave-to: Leaving completed

Use style class name (third-party css library) to achieve transition animation

Introduction to the use of third-party animation libraries

  1. Animate.cssis a ready -to-use cross-browser animation library to use in your web projects
  2. downloadnpm install animate.css --save
  3. introduceimport 'animate.css'
  4. use
    1. Set for the element class, specifying the animation style name as needed
    2. The specific animation name can be viewed in the document animate.css

step

  1. add v-iforv-show
  2. Set custom animation class names for six timings, mainly considering enter-active-classandleave-active-class

The class names of the six timings when the animation is executed

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

Leave a Comment

Your email address will not be published. Required fields are marked *