Vue学习（十七）：动画与过渡

1. vue动画的理解

• 操作css的trasition或animation
• vue会给目标元素添加/移除特定的class

2. 写法

• 准备好样式：
  • 元素进入的样式：
    • v-enter：进入的起点
    • v-enter-active：进入过程中
    • v-enter-to：进入的终点
  • 元素离开的样式：
    • v-leave：离开的起点
    • v-leave-active：离开过程中
    • v-leave-to：离开的终点

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

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

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

3. 示例

3.1 动画

• 在关键帧keyframes中指定了起点和终点，所以只需要配置active

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.hello-enter-active{
		animation: anime 0.5s linear;
	}

	.hello-leave-active{
		animation: anime 0.5s linear reverse;
	}

	@keyframes anime {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

3.2 过渡

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group name="hello" appear>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">动画与过渡</h1>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	/* 进入的起点、离开的终点 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	/* 进入的终点、离开的起点 */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}
</style>

3.3 第三方动画库

• 第三方动画库animate.css
• 配置指定的name属性：name="animate__animated animate__bounce"
• 配置enter-active-class和leave-active-class属性为需要的类名

<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">动画与过渡</h1>
		</transition-group>
	</div>
</template>

<script>
	//引入animate.css
	import 'animate.css'
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
</style>