您好,登錄后才能下訂單哦!
這篇“Vue中如何實現(xiàn)過渡動畫效果”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Vue中如何實現(xiàn)過渡動畫效果”文章吧。
在開發(fā)中,我們想要給一個組件的顯示和消失添加某種過渡動畫,可以很好的增加用戶體驗:
React框架本身并沒有提供任何動畫相關(guān)的API,所以在React中使用過渡動畫我們需要使用一個第三方庫 react-transition-group;
Vue中為我們提供一些內(nèi)置組件和對應(yīng)的API來完成動畫,利用它們我們可以方便的實現(xiàn)過渡動畫效果;
我們來看一個案例:
Hello World的顯示和隱藏;
通過下面的代碼實現(xiàn),顯式和隱藏Hello World是不會有任何動畫效果的;
<template> <div class="app"> <button @click="btnClick">Toogle</button> <h3 v-show="isShow">Hello World</h3> </div> </template> <script setup> import { ref } from 'vue'; const isShow = ref(true) const btnClick = () => { isShow.value = !isShow.value } </script>
沒有動畫的情況下,整個內(nèi)容的顯示和隱藏會非常的生硬:
如果我們希望給單元素或者組件實現(xiàn)過渡動畫,可以使用Vue提供的 transition 內(nèi)置組件來完成動畫;
Vue 提供了 transition 的封裝組件,在下列情形中,可以給任何元素和組件添加進入/離開過渡:
條件渲染 (使用 v-if)條件展示 (使用 v-show)
動態(tài)組件
組件根節(jié)點
例如我們給剛剛的Hello World添加動畫, 首先定義類(類的名字暫時是固定的)
/* 從什么狀態(tài)進入 */ .v-enter-from { opacity: 0; } /* 進入之后打算變成的狀態(tài) */ .v-enter-to { opacity: 1; } /* 進入的過程中做什么 */ .v-enter-active { transition: opacity 2s linear; }
定義好類之后, 我們可以使用Vue的內(nèi)置組件 transition 將動畫元素包裹起來, transition 組件會自動在合適的時機, 將合適的類添加到它所包裹的元素上
<template> <div class="app"> <button @click="btnClick">Toogle</button> <!-- 使用內(nèi)置組件包裹h3 --> <transition> <h3 v-show="isShow">Hello World</h3> </transition> </div> </template>
此時顯式Hello World 就已經(jīng)有動畫效果了, 但是隱藏時并沒有效果, 是因為我們剛剛定義的類是進入的類, 當(dāng)離開時我們也應(yīng)該定義對應(yīng)的類
/* 離開后的狀態(tài) */ .v-leave-to, /* 從什么狀態(tài)進入 */ .v-enter-from { opacity: 0; } /* 開始離開的狀態(tài) */ .v-leave-from, /* 進入之后打算變成的狀態(tài) */ .v-enter-to { opacity: 1; } /* 離開過程中做什么 */ .v-leave-active, /* 進入的過程中做什么 */ .v-enter-active { transition: opacity 1s linear; }
我們會發(fā)現(xiàn),上面演示代碼中Vue自動給h3元素添加了動畫,這是什么原因呢?
當(dāng)插入或刪除包含在 transition 組件中的元素時, Vue 將會做以下處理:
1.自動嗅探目標(biāo)元素是否應(yīng)用了CSS過渡或者動畫,如果有,那么在恰當(dāng)?shù)臅r機添加/刪除 CSS類名;
2.如果 transition 組件提供了JavaScript鉤子函數(shù),這些鉤子函數(shù)將在恰當(dāng)?shù)臅r機被調(diào)用;
3.如果沒有找到JavaScript鉤子并且也沒有檢測到CSS過渡/動畫, DOM插入、刪除操作將會立即執(zhí)行;
在上面我們簡單使用了Vue會自動添加/刪除的CSS類名, 接下來我們詳細(xì)學(xué)習(xí)一下都有哪些類吧
我們會發(fā)現(xiàn)上面提到了很多個class,事實上Vue就是幫助我們在這些class之間來回切換完成的動畫:
v-enter-from
:定義進入過渡的開始狀態(tài)。
在元素被插入之前生效,在元素被插入之后的下一幀移除。
v-enter-active
:定義進入過渡生效時的狀態(tài)。
在整個進入過渡的階段中應(yīng)用,在元素被插入之前生效,在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間,延遲和曲線 函數(shù)。
v-enter-to
:定義進入過渡的結(jié)束狀態(tài)。
在元素被插入之后下一幀生效 (與此同時 v-enter-from 被移除),在過渡/動畫完成之后移除。
v-leave-from
:定義離開過渡的開始狀態(tài)。
在離開過渡被觸發(fā)時立刻生效,下一幀被移除。
v-leave-active
:定義離開過渡生效時的狀態(tài)。
在整個離開過渡的階段中應(yīng)用,在離開過渡被觸發(fā)時立刻生效,在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間,延遲 和曲線函數(shù)。
v-leave-to
:離開過渡的結(jié)束狀態(tài)。
在離開過渡被觸發(fā)之后下一幀生效 (與此同時 v-leave-from 被刪除),在過渡/動畫完成之后移除。
class的name命名規(guī)則如下:
如果我們使用的是一個沒有name屬性的transition,那么所有的class是以 v- 作為默認(rèn)前綴;
如果我們添加了一個name屬性,比如<transtion name= “abc” >,那么所有的class會以 abc- 開頭;
例如有一段文本, 我們對文本的顯式隱藏添加上一些動畫
先定義類, 用于實現(xiàn)動畫
/* 定義進入的動畫 */ .v-enter-active { animation: myAnim 2s linear; } /* 定義離開的動畫 */ .v-leave-active { animation: myAnim 2s linear reverse; } /* 定義序列幀動畫 */ @keyframes myAnim { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.25); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
同transition動畫, 使用transition組件包裹
<template> <div class="app"> <button @click="btnClick">Toogle</button> <!-- 使用內(nèi)置組件包裹h3 --> <transition> <h3 v-show="isShow"> 今天2022年8月6日星期六,利好消息來襲!因為經(jīng)濟數(shù)據(jù)仍顯疲軟, 市場對全球經(jīng)濟增速放緩可能抑制需求的擔(dān)憂加劇,導(dǎo)致成品油調(diào)價 掛靠的國際油價繼續(xù)下挫,同時綜合原油品種變化率也已經(jīng)完成正值 到負(fù)值的轉(zhuǎn)變。數(shù)據(jù)顯示:截至國內(nèi)成品油調(diào)價周期的第8個工作日 結(jié)束,原油綜合變化率為-0.83%,詳細(xì)成品油調(diào)價窗口開啟時間定在 8月9日24時開啟。 </h3> </transition> </div> </template>
Vue為了知道過渡的完成,內(nèi)部是在監(jiān)聽 transitionend 或 animationend,到底使用哪一個取決于元素應(yīng)用的CSS規(guī)則:
如果我們只是使用了其中的一個,那么Vue能自動識別類型并設(shè)置監(jiān)聽;
但是如果我們同時使用了transition動畫和animation動畫呢?
在開發(fā)中, 如果設(shè)置了兩個動畫, 盡量要保持兩個動畫的時間一致;
/* 定義transition動畫 */ .v-enter-from, .v-leave-to { opacity: 0; } .v-enter-to, .v-leave-from { opacity: 1; } .v-enter-active { /* 設(shè)置兩個不同的動畫, 最好保持動畫時間一致 */ animation: myAnim 2s linear; transition: opacity 2s linear; } .v-leave-active { /* 設(shè)置兩個不同的動畫, 最好保持動畫時間一致 */ animation: myAnim 2s linear reverse; transition: opacity 2s linear; } /* 定義序列幀動畫 */ @keyframes myAnim { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.25); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
如果使用兩個動畫, 動畫的時間又不一致, 并且在這個情況下可能某一個動畫執(zhí)行結(jié)束時,另外一個動畫還沒有結(jié)
在這種情況下,我們可以設(shè)置 type 屬性為 animation 或者 transition 來明確的告知Vue監(jiān)聽的類型, 以哪一個動畫為標(biāo)準(zhǔn)(一般不設(shè)置);
<!-- 告知以哪一個動畫為標(biāo)準(zhǔn) --> <transition type="transition"> <h3 v-show="isShow"> 今天2022年8月6日星期六,利好消息來襲!因為經(jīng)濟數(shù)據(jù)仍顯疲軟, 市場對全球經(jīng)濟增速放緩可能抑制需求的擔(dān)憂加劇,導(dǎo)致成品油調(diào)價 掛靠的國際油價繼續(xù)下挫,同時綜合原油品種變化率也已經(jīng)完成正值 到負(fù)值的轉(zhuǎn)變。數(shù)據(jù)顯示:截至國內(nèi)成品油調(diào)價周期的第8個工作日 結(jié)束,原油綜合變化率為-0.83%,詳細(xì)成品油調(diào)價窗口開啟時間定在 8月9日24時開啟。 </h3> </transition>
我們來看當(dāng)前的動畫在兩個元素之間顯式隱藏切換的時候添加動畫存在的問題:
我們會發(fā)現(xiàn) Hello World 和 你好啊,李銀河是同時存在的:
這是因為默認(rèn)情況下進入和離開動畫是同時發(fā)生的;
如果確實我們希望達到這個的效果,那么是沒有問題;
但是如果我們不希望同時執(zhí)行進入和離開動畫,那么我們需要設(shè)置transition的過渡模式:
in-out: 新元素先進行過渡,完成之后當(dāng)前元素過渡離開;
out-in: 當(dāng)前元素先進行過渡,完成之后新元素過渡進入;
<transition mode="in-out"> <h3>Hello Worl</h3> <h3>你好啊, 李銀河</h3> </transition>
上面的示例同樣適用于我們的動態(tài)組件:
<div class="app"> <div> <button @click="isShow = !isShow">切換</button> </div> <transition name="why" mode="out-in"> <component :is=" isShow ? 'home': 'about'"></component> </transition> </div>
默認(rèn)情況下,首次渲染的時候是沒有動畫的,如果我們希望給他添加上去動畫,那么就可以增加另外一個屬性appear:
<div class="app"> <div> <button @click="isShow = !isShow">切換</button> </div> <transition name="why" mode="out-in" appear=""> <component :is=" isShow ? 'home': 'about'"></component> </transition> </div>
目前為止,過渡動畫我們只要是針對單個元素或者組件的:
要么是單個節(jié)點;
要么是同一時間渲染多個節(jié)點中的一個;
那么如果希望渲染的是一個列表,并且該列表中添加刪除數(shù)據(jù)也希望有動畫執(zhí)行呢?
這個時候我們要使用<transition-group>組件來完成;
使用<transition-group>有如下的特點:
默認(rèn)情況下,它不會渲染成任何一個元素,但是你可以指定一個元素并以 tag attribute 讓他進行渲染;
過渡模式不可用,因為我們不再相互切換特有的元素;
內(nèi)部元素總是需要提供唯一的 key attribute 值;
CSS 過渡的類將會應(yīng)用在內(nèi)部的元素中,而不是這個組/容器本身;
我們來做一個案例:
案例是一列數(shù)字,可以繼續(xù)添加或者刪除數(shù)字;
在添加和刪除數(shù)字的過程中,對添加的或者移除的數(shù)字添加動畫;
示例代碼如下
<template> <div class="app"> <button @click="addNumber">添加數(shù)字</button> <button @click="removeNumber">刪除數(shù)字</button> <template v-for="item in nums" :key="item"> <span>{{ item }}</span> </template> </div> </template> <script setup> import { ref } from 'vue'; const nums = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) const addNumber = () => { nums.value.splice(randomIndex(), 0, nums.value.length) } const removeNumber = () => { nums.value.splice(randomIndex(), 1) } const randomIndex = () => { return Math.floor(Math.random() * nums.value.length) } </script>
添加動畫, 此時添加上動畫, 這個組中的內(nèi)容都會有動畫效果
span { margin-right: 20px; display: inline-block; } .v-enter-from, .v-leave-to { opacity: 0; transform: translateY(20px); } .v-enter-to, .v-leave-from { opacity: 1; transform: translateY(0); } .v-enter-active, .v-leave-active { transition: all 2s linear; }
<template> <div class="app"> <button @click="addNumber">添加數(shù)字</button> <button @click="removeNumber">刪除數(shù)字</button> <!-- tag屬性, 告知渲染成div --> <transition-group tag="div"> <template v-for="item in nums" :key="item"> <span>{{ item }}</span> </template> </transition-group> </div> </template>
在上面的案例中雖然新增的或者刪除的節(jié)點是有動畫的,但是對于哪些其他需要移動的節(jié)點是沒有動畫的:
我們可以通過使用一個新增的 v-move 的class來完成動畫;
它會在元素改變位置的過程中應(yīng)用;
像之前的名字一樣,我們也可以通過name來自定義前綴;
/* 定位解決刪除占用空間, 無法執(zhí)行動畫問題 */ .v-leave-active { position: absolute; } /* 針對其他節(jié)點移動需要的動畫 */ .v-move { transition: all 2s linear; }
以上就是關(guān)于“Vue中如何實現(xiàn)過渡動畫效果”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。