分分钟 get VUE 动画与过渡（内含动图案例）

嗨咯！这里是小M. （努力学习VUE版）

今天浅浅分享一下 VUE中的 动画和过渡

动画和过渡是两种不同的概念，但是能够实现相同的动效，或者结合起来使用。

1.基本使用方法

先来看看VUE官方文档

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

下面的例子采用v-show

transiton标签和template标签一样，不会真实的出现在DOM树中，但是将需要过渡的标签放在里面，会避免很多不必要的麻烦

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

以及官方的图解

如果你已经领悟了精髓，那么恭喜你，可以点击右上角的×或者划到下一篇文章了。

↓↓↓但你还是云里雾里的，祝贺你，你可以继续阅读下面 的内容来理解上图的具体含义↓↓↓

2.动画

css中的动画是animation和@keyframes搭配起来使用，在VUE中也是必须写这两个，但是不同的是VUE中的类名会有规定，并且VUE会在合适的时机调用合适的动画效果

bibi is nothing ， see GIF

上代码（请注意看代码中的注释来理解动画的含义）：

其中给transition加上了name属性，是为了区别多个动画样式；如果transition没有name属性，默认类名就是.v

通过moveBox的true / false来供VUE判断是否展示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.过渡

GIF：

代码：

如果不结合.v-enter-active和.v-leave-active，就必须给标签加上transition样式

通过moveBox2的true / false来供VUE判断是否展示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>

我浅浅的画了一张图，供大家理解上面4个类名：

4.animate.css 第三方库

animate.css官网

通过npm安装，npm install animate.css

通过yarn安装，yarn add animate.css

安装完成后导入即可，import ‘animate.css’

右侧是它的类名，可以直接copy

使用的时候需要在transition标签中添加这三个属性：

 name="animate__animated animate__bounce"
 enter-active-class="animate__rubberBand"
 leave-active-class="animate__swing"

顾名思义，

• 第一个是固定的name
• 第二个进场动画类名
• 第三个出场动画类名

类名直接选好想要的，复制就完事儿~

GIF：

代码：

<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>

今天的分享的就到这里啦
如果想要完整代码的可以评论区或者私信踢我