Vue中動畫與過渡的使用教程

更新時間：2023年01月09日 09:39:38 作者：酷爾。

最近在寫vue的一個項目要實現(xiàn)過渡的效果,雖然vue動畫不是強項,庫也多,但是基本的坑還是得踩扎實,下面這篇文章主要給大家介紹了關于Vue中實現(xiàn)過渡動畫效果的相關資料,需要的朋友可以參考下

前言

本篇博客將會介紹如何在Vue中使用動畫效果。

一、回憶css3中的動畫

定義一個動畫：

定義一個動畫名為atguigu
@keyframes atguigu {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}

使用動畫

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

animation: name duration timing-function delay iteration-count direction fill-mode;

二、Vue中單標簽使用動畫

vue中定義動畫使用，需要將響應標簽放入標簽 <transition></transition>中

若有多個元素需要過度，則需要使用：<transition-group>，且每個元素都要指定key值。

1.默認使用方法

這種方法只適用于一個插件只有一個動畫效果，因為沒有辦法對動畫進行區(qū)分

元素進入的樣式：

v-enter：進入的起點
v-enter-active：進入過程中
v-enter-to：進入的終點

元素離開的樣式：

v-leave：離開的起點
v-leave-active：離開過程中
v-leave-to：離開的終點

可以結合以下一個實例使用：

<template>
	<div>
		<button @click="isShow = !isShow">顯示/隱藏</button>
		//appear 屬性加上會在頁面加載時執(zhí)行動畫
		<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;
	}
	//展示標簽時激活
	.v-enter-active{
		animation: atguigu 0.5s linear;
	}
	//不展示標簽時激活
	.v-leave-active{
		animation: atguigu 0.5s linear reverse;
	}
	@keyframes atguigu {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

2.自定義使用方法

這種方法較為靈活，一個插件可以定義多個動畫，并用定義的名字進行區(qū)分，用法如下：

<template>
	<div>
		<button @click="isShow = !isShow">顯示/隱藏</button>
		//給標簽指定一個名字
		<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;
	}
	//這里的寫法有所改變，應為.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>

三、Vue中多標簽實現(xiàn)動畫效果

上面介紹到的transition只能用于包裹一個標簽，如果包裹多個標簽的話就會報錯。如果想要包裹多個標簽可以使用transition-group。除了使用定義的動畫，還可以使用過渡效果實現(xiàn)動畫。

具體的使用方法如下：

<template>
	<div>
		<button @click="isShow = !isShow">顯示/隱藏</button>
		//里面的兩個h1均由動畫效果
		<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 會在指定的時期，將相應的動畫效果展示出來，我們只用這樣寫即可。
	/* 進入的起點、離開的終點 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	/* 進入的終點、離開的起點 */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
</style>

四、使用第三方動畫

市面上有許多優(yōu)秀的動畫庫，我們在使用的時候只需進行一些簡單的配置就可以使用。

下面有一個案例，是使用的animate.css動畫庫可以參考一下：

<template>
	<div>
		<button @click="isShow = !isShow">顯示/隱藏</button>
		<transition-group 
			appear
			//下面三行為官網(wǎng)給出的配置
			name="animate__animated animate__bounce" 
			//這里就是顯示組件跟隱藏組件時的動畫
			//等號后面的東西直接去官網(wǎng)找自己想要的效果然后把名稱復制上去即可
			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>

到此這篇關于Vue中動畫與過渡的使用教程的文章就介紹到這了,更多相關Vue動畫與過渡內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: