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、动画效果演示