Get VUE animations and transitions in minutes (including animation examples)

Hello! Here is little M. (studying the VUE version hard)

Today, I will share with you the animation and transition in Vue

Animations and transitions are two different concepts, but can achieve the same animation, or be used in combination.

1. Basic usage

Let's take a look at the official VUE documentation

Vue transitionprovides encapsulated components for adding entry/exit transitions to any element and component in the following cases

• Conditional rendering (use v-if)
• Conditional display (use v-show)
• dynamic components
• component root node

The following example uses v-show

Like the template tag, the transiton tag will not actually appear in the DOM tree, but putting the tags that need transition in it will avoid a lot of unnecessary trouble

In the transition of entering/leaving, there will be 6 class switches.

1. v-enter: Defines the start state of the transition into. Takes effect before the element is inserted, and is removed the next frame after the element is inserted.
2. v-enter-active: Defines the state when the entry transition takes effect. Applies throughout the entry transition, takes effect before the element is inserted, and is removed after the transition/animation is complete. This class can be used to define entry transition process times, delays and curve functions.
3. v-enter-to: Enter the end state of the transition as defined in version 2.1.8 and above . Takes effect on the next frame after the element is inserted (and removed at the same v-entertime ), removed after the transition/animation is complete.
4. v-leave: Defines the start state of the leaving transition. Takes effect immediately when the leave transition is triggered, and is removed the next frame.
5. v-leave-active: Defines the state when the leave transition takes effect. Applied during the entire exit transition phase, takes effect immediately when the exit transition is triggered, and is removed after the transition/animation completes. This class can be used to define process times, delays and curve functions for leaving transitions.
6. v-leave-to: Version 2.1.8 and above defines the end state of the leaving transition. Takes effect on the next frame after the exit transition is triggered (and v-leaveis ), removed after the transition/animation is complete.

and official illustrations

If you have comprehended the essence, then congratulations, you can click the X in the upper right corner or swipe to the next article.

↓↓↓ But you are still in the fog, congratulations, you can continue to read the following content to understand the specific meaning of the above picture↓↓↓

2. Animation

The animation in css is a combination of animation and @keyframes, which must be written in VUE, but the difference is that the class name in VUE will be specified, and VUE will call the appropriate animation effect at the right time

bibi is nothing ， see GIF

The above code (please look at the comments in the code to understand the meaning of the animation):

The name attribute is added to the transition to distinguish multiple animation styles; if the transition does not have a name attribute, the default class name is .v

Use the true / false of moveBox for VUE to determine whether to display the div

<button @click="moveBox = !moveBox">showBox</button>
      <transition name="move">
        <div class="moveBox" v-show="moveBox">这里是小M，现在是动画</div>
      </transition>
复制代码

export default {
  name: "School",
  data() {
    return {
      moveBox: true,
    };
  },
};
复制代码

<style scoped>
/* 进场动画 .transition的name-enter（进入）-active */
.move-enter-active {
  animation: move 1s linear;
}
/* 出场动画 .transition的name-leave（离开）-active*/
.move-leave-active {
  animation: move 1s reverse;
}
@keyframes move {
  from {
      /*通过位移，让box消失在最左边 */
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
​
.moveBox {
  width: 200px;
  height: 50px;
  background-color: antiquewhite;
  padding: 10px;
}
​
</style>
复制代码

3. Transition

GIF：

Code:

If you do not combine .v-enter-active and .v-leave-active, you must add a transition style to the label

Use the true / false of moveBox2 for VUE to determine whether to display the div

 <button @click="moveBox2 = !moveBox2">showBox</button>
      <transition name="move2">
        <div class="moveBox" v-show="moveBox2" style="transition: 1s linear">
          这里是小M，现在是过渡
        </div>
      </transition>
复制代码

export default {
  name: "School",
  data() {
    return {
      moveBox2: true,
    };
  },
};
复制代码

<style scoped>
/* 进入的起点和离开的终点 样式相同 */
.move2-enter,
.move2-leave-to {
  transform: translateX(-100%);
}
/* 离开的起点和进入的终点 样式相同 */
.move2-enter-to,
.move2-leave {
  transform: translateX(0);
}
​
.moveBox {
  width: 200px;
  height: 50px;
  background-color: antiquewhite;
  padding: 10px;
}
​
</style>
复制代码

I drew a picture shallowly for everyone to understand the above 4 class names:

4.animate.css third-party library

animate.css official website

Install via npm, npm install animate.css

Install via yarn, yarn add animate.css

After the installation is complete, import it, import 'animate.css'

The right side is its class name, which can be copied directly

When using, you need to add these three attributes to the transition tag:

 name="animate__animated animate__bounce"
 enter-active-class="animate__rubberBand"
 leave-active-class="animate__swing"
复制代码

As the name suggests,

• The first is a fixed name
• The second approach animation class name
• The third appearance animation class name

Just select the class name you want, copy it and you're done~

GIF：

Code:

<button @click="animateBox = !animateBox">showBox</button>
      <transition
        name="animate__animated animate__bounce"
        enter-active-class="animate__rubberBand"
        leave-active-class="animate__swing"
      >
        <div class="moveBox" v-show="animateBox">
          这里是小M，现在是Animate.css
        </div>
      </transition>
复制代码

import "animate.css";
export default {
  name: "School",
  data() {
    return {
      animateBox: true,
    };
  },
};
复制代码

<style scoped>
.moveBox {
  width: 200px;
  height: 50px;
  background-color: antiquewhite;
  padding: 10px;
}
​
</style>
复制代码

Today's sharing is here. If you want the complete code, you can hit me in the comment area or private message