vue实现动画效果⼤全
vue要实现动画很简单，同时他提供了很多种实现⽅式，为了快速⼊门，这⾥只讲⼀种最简单实⽤的⽅法，就是结合animate.css这个css动画库。
animate.style
准备⼯作
安装animate.css
npm install animate.css --save
在main.ts中导⼊animate.css
import 'animate.css/animate.min.css'
transition
vue封装了动画组件，我们可以直接使⽤，只需要⽤"<transition>"包裹要添加动画的元素(或组件)，这⾥我们要注意的就是触发条件：
1. 被包裹组件(或元素)上的v-if的值发⽣变化
2. 被包裹组件(或元素)上的v-show的值发⽣变化
3. 动态组件的is值发⽣变化的时候也会触发动画，动态组件在业务代码中不常见，这⾥暂时不讲，记住这个名词即可
App.vue
<template>
<div>
<button @click="isShow = !isShow">切换</button>
<transition
:duration="1000"
enter-active-class="animate__animated animate__fadeInDown"
leave-active-class="animate__animated animate__fadeOutUp"
>
<p v-if="isShow">hello</p>
</transition>
</div>
</template>
<script>
import "animate.css";
import { defineComponent } from "vue";
css3animate
export default defineComponent({
data() {
return {
isShow: true,
};
},
});
</script>
效果
这⾥的animate__animated代表当前元素使⽤animate.css的动画，这个样式是animate.css⾃带的，后⾯的animate__fadeInDown是具体的动画名称。
更多的动画样式名可查看：animate.style/
enter-active-class
组件(或元素)的"v-if/v-show"值从"false"变成"true"后，vue会⾃动给元素增加"enter-active-class"中的样式名，动画执⾏完毕vue会⾃动删除元素上添加的"动画样式"。
leave-active-class
与"enter-active-class"，在"v-if/v-show"值从"true"变成"false"后，执⾏类似操作。
duration
通过duration我们可以指定动画的执⾏时间。
mode
当"<transition>"下有2个内容的时候，需要控制下动画触发时机，不然可能会出现"重叠"等意外。
<template>
<transition
:duration="1000"
enter-active-class="animate__animated animate__fadeInDown"
leave-active-class="animate__animated animate__fadeOutUp"
>
<p v-if="isShow">hello</p>
<p v-else>你好</p>
</transition>
</template>
效果
2段⽂字再点击切换后同时动画，这肯定不是我们要的，mode可以控制2个元素的动画出现顺序。mode
=out-in让消失动画先执⾏，再执⾏显⽰动画。
反之还有"in-out"，本例显⽰是要使⽤"out-in"：
<template>
<transition
+  mode="out-in"
:duration="1000"
enter-active-class="animate__animated animate__fadeInDown"
leave-active-class="animate__animated animate__fadeOutUp"
>
<p v-if="isShow">hello</p>
<p v-else>你好</p>
</transition>
</template>
效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。