定義一個(gè)動(dòng)畫(huà)名為atguigu
@keyframes atguigu {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}

h1 {
  text-align: center;
  background-color: rgba(0, 217, 255, 0.897);
}
將動(dòng)畫(huà)使用到come類(lèi)中
.come {
  animation: atguigu 0.5s linear;
}
將動(dòng)畫(huà)atguigu的相反使用到to類(lèi)中
.to {
  animation: atguigu 0.5s linear reverse;
}

<template>
	<div>
		<button @click="isShow = !isShow">顯示/隱藏</button>
		//appear 屬性加上會(huì)在頁(yè)面加載時(shí)執(zhí)行動(dòng)畫(huà)
		<transition appear>
			<h1 v-show="isShow">你好??！</h1>
		</transition>
	</div>
</template>
<script>
	export default {
		name:'Hello',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>
<style scoped>
	h1{
		background-color: orange;
	}
	//展示標(biāo)簽時(shí)激活
	.v-enter-active{
		animation: atguigu 0.5s linear;
	}
	//不展示標(biāo)簽時(shí)激活
	.v-leave-active{
		animation: atguigu 0.5s linear reverse;
	}
	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

<template>
	<div>
		<button @click="isShow = !isShow">顯示/隱藏</button>
		//給標(biāo)簽指定一個(gè)名字
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>
<script>
	export default {
		name:'Hello',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>
<style scoped>
	h1{
		background-color: orange;
	}
	//這里的寫(xiě)法有所改變，應(yīng)為.name-enter-activate.....
	.hello-enter-active{
		animation: atguigu 0.5s linear;
	}
	.hello-leave-active{
		animation: atguigu 0.5s linear reverse;
	}
	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

<template>
	<div>
		<button @click="isShow = !isShow">顯示/隱藏</button>
		//里面的兩個(gè)h1均由動(dòng)畫(huà)效果
		<transition-group name="hello" appear>
			<h1 v-show="!isShow" key="1">你好?。?lt;/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;
	}
	//Vue 會(huì)在指定的時(shí)期，將相應(yīng)的動(dòng)畫(huà)效果展示出來(lái)，我們只用這樣寫(xiě)即可。
	/* 進(jìn)入的起點(diǎn)、離開(kāi)的終點(diǎn) */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	/* 進(jìn)入的終點(diǎn)、離開(kāi)的起點(diǎn) */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
</style>

<template>
	<div>
		<button @click="isShow = !isShow">顯示/隱藏</button>
		<transition-group 
			appear
			//下面三行為官網(wǎng)給出的配置
			name="animate__animated animate__bounce" 
			//這里就是顯示組件跟隱藏組件時(shí)的動(dòng)畫(huà)
			//等號(hào)后面的東西直接去官網(wǎng)找自己想要的效果然后把名稱(chēng)復(fù)制上去即可
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好?。?lt;/h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>
<script>
	import 'animate.css'
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>
<style scoped>
	h1{
		background-color: orange;
	}
</style>