分分钟 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-to2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
  4. v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
  5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
  6. v-leave-to2.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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值