1、切换的动画
Vue中的动画最重要的一个点是该组件(或是标签元素)必须存在状态的改变，动画效果才会生效，比如下面这段代码，如果不加v-if或不加v-show，该部分是不会有任何动画效果展示的。
<template>
<div id="demo">
<button @click="isShow=!isShow">切换</button>
<!-- 过渡动画 -->
<transition name="myfade">
<p v-show="isShow">123456789</p>
</transition>
</div>
</template>
<script>
export default {
name: "demo",
data() {
return {
isShow:true
};
},
};
</script>
<style scoped>
.myfade-enter-active , .myfade-leave-active {
transition: all 1s;
}
.myfade-enter,.myfade-leave-to {
opacity: 0;
transform: translateX(100px);
}
</style>
2、transition的使用
<transition name="动画名字自定义">
组件或是标签元素
</transition>
3、transition的几个动画类名的理解
.myfade-enter：进入过渡动画的开始状态，元素被插入时即生效（运动的初始状态）
.myfade-enter-active：进入过渡动画的结束状态，这一部分在整个过渡阶段中应用，元素被插入之前生效，在过渡动画完成之后移除。
.myfade-enter-to：在元素被插入之后下一帧生效（此时.myfade-enter移除），过渡动画完成之后移除
.myfade-leave：定义离开过渡的开始状态，在离开过渡被触发时立刻生效。
.myfade-leave-active： 定义离开过渡生效时的状态，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
.myfade-leave-to：在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除
3.1、对应的状态过程：
opacity : 0 -> 1对应此时动画开始.myfade-enter->.myfade-enter-active->.myfade-enter-to
opacity : 1 -> 0对应结束.myfade-leave->.myfade-leave-active->.myfade-leave-to
3.2、结论：
根据上面的过渡形式：在.myfade-enter-active和.myfade-leave-active的过程中是可以控制进入和离开的动画曲线的。
需要注意的是：如果transition没有添加名字，那么动画效果就需要是v-开头。
4、animate.css动画库的使用
4.1、安装或者link引入
- npm安装
npm install animate.css@3.5.1 --save - link引入
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
4.2、main.js全局引入
import animated from 'animate.css';
Vue.use(animated)
4.3、组件中使用
<template>
<div id="demo">
<button @click="isShow = !isShow">click</button><br/>
<transition
name="custom-classes-transition"
enter-active-class="animated bounceInRight"
leave-active-class="animated bounceOutRight">
<p v-if="isShow">测试Animate.css动画库的动画效果</p>
</transition>
</div>
</template>
<script>
export default {
name: "demo",
data() {
return {
isShow:true
};
},
};
</script>
<style scoped>
</style>
4.4、当不希望使用时的卸载操作
npm uninstall animate.css --save
4.5、动画效果演示
