vue自定义动画 以及animation包在vue中的使用

vue动画

自定义动画

当vue中，显示隐藏，创建移除，一个元素或者一个组件的时候，可以通过transition实现动画。

如果元素或组件离开，完成一个淡出效果：

<transition name="fade">
  <p v-if="show">100</p>
</transition>

.fade-leave {
    opacity: 1
}
.fade-leave-active {
    transition: all 1s;
}
.fade-leave-to {
    opcaity: 0
}

• 进入（显示，创建）
  • v-enter 进入前 （vue3.0 v-enter-from）
  • v-enter-active 进入中
  • v-enter-to 进入后
• 离开（隐藏，移除）
  • v-leave 离开前 （vue3.0 v-leave-from）
  • v-leave-active 离开中
  • v-leave-to 离开后

1. 使用<transition>包裹要过度的元素，并配置name属性：

   <transition name="hello">
   	<h1 v-show="isShow">你好啊！</h1>
   </transition>
   

2. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

注意：多个transition使用不同动画，可以添加name属性，name属性的值替换v即可。

使用animation工具包

包下载地址: https://www.npmjs.com/package/animate.css

官方使用文档: https://animate.style/

在vue中使用

enter-active-class 进入的动画

leave-active-class 离开的动画

appear 刚加载的时候使用

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好！</h1>
			<h1 v-show="isShow" key="2">hi!</h1>
		</transition-group>
	</div>
</template>