你了解Vue动画 transition吗？

一、动画

自动对显示与隐藏的元素添加类名

二、参数

.v-enter-active 进入整个过程

.v-enter-from 进入开始状态

.v-enter-to 进入结束状态

.v-leave-active 离开的过程

.v-leave-from 离开开始状态

.v-leave-to 离开结束状态

图：

三、transition

mode模式

• in-out
• out-in

<transition  mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="slideOutRight animated">
	<button key='a' v-if="flag">A</button>
	<button key='b' v-else>B</button>
</transition>	

name 名称

enter-active-class 自定义进入class名称

leave-active-class 自定义离开class名称

transition-group

• tag包裹标签名
• .v-move 正在移动的元素

四、使用关键帧动画

@keyframes fadeIn{
	from{opacity: 0;}
	to{ opacity: 1;}
}
@keyframes fadeOut {
	0%{ opacity: 1;}
	100%{ opacity: 0;}
}
 .fade-enter-active{ animation: fadeIn ease 1s;}
 .fade-leave-active{ animation: fadeOut ease 1s;}

五、第三方引入

animate动画库：https://www.jq22.com/yanshi819

//link引入
<link rel="stylesheet" href="./css/animate.css">
<transition name="fade" enter-active-class="animated slideInDown" leave-active-class="slideOutDown animated">
	<img src="./images/sun.jpeg" alt="" width="120" v-if="flag">
</transition>