Vue3 过渡动画的简单使用（使用第三方 animate.css 动画库）

Vue3过渡（相比Vue2）

vue3中过渡的 class 名被更改（过渡类名 v-enter修改为v-enter-from、过渡类名v-leave 修改为 v-leave-from），如图：

Vue过渡

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

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

值得注意的是：
transition在对多个元素使用时需要不能使用v-show，只能使用v-if；
Vue3情况下transition外的被切换时将不再触发过渡效果。

使用第三方 CSS动画库

安装

使用命令：

npm install animate.css --save

在main.js中：

import animated from 'animate.css'
App.use(animated)

使用

将需要过渡的元素用transition包起来：

<transition>
  <div v-if="!isButtonBeClicked">
    添加关注商品 
    </div>
  <div v-else>
    确认添加商品
  </div>
</transition>

在transition中添加class名：

<transition
  mode="out-in"
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="!isButtonBeClicked">
    添加关注商品 
    </div>
  <div v-else>
    确认添加商品
  </div>
</transition>

解释一下：

1. out-in是什么？
   看官网解释
2. enter-active-class 等是什么？
   是 自定义过渡 class 类名 ，可以引用第三方CSS库，分别对应上面的图，详见Vue官网
3. animate__animated 是什么？
   使用animate.css前要加上这个，如图：
   
4. 怎么使用动画效果?
   进入animate.css官网，点击所需要的动画效果复制到 自定义过渡 class 类名 中，注意3所诉
   

完成

动画速度

默认动画效果为2s，比较慢，可以使用CSS调快：

.animate__animated.animate__bounce {	/* 类名*/
  --animate-duration: 0.25s;
}

:root {	/*这样是全局调节*/
  --animate-duration: 0.25s;
}

animate.css 调节

补充一下调节

--animate-repeat 是重复次数（number）
--animate-delay是延迟（秒）
--animate-duration是速度（秒）