在vue中使用animate.css库

官网

写法

.fade-enter, .fade-leave-to {
	opacity: 0;
}
.fade-enter-active, .fade-leave-active {
	transition: opacity 3s;
}

// 同时具有animate动画和transition动画
<transition
	name="fade"
	enter-active-class="animated swing fade-enter-active"
	leave-active-class="animated shake fade-leave-active"
>
	要包裹的组件
</transition>

更改动画时长的两种方式

1. 将类型设置为transition，动画时长根据transition设置的时长为准<transition type="transition"></transition>
2. 自定义动画时间<transition ：duration="5000"></transition>、
   动态设置进出场动画时间<transition :duration="{ enter: 5000, leave: 10000 }"></transition>