vue內(nèi)置組件Transition的示例詳解
1. Transition定義
Vue 提供了兩個內(nèi)置組件，可以幫助你制作基于狀態(tài)變化的過渡和動畫：
<Transition>會在一個元素或組件進入和離開 DOM 時應用動畫。<TransitionGroup>會在一個 v-for 列表中的元素或組件被插入，移動，或移除時應用動畫。
簡單地說，就是當元素發(fā)生變化，比如消失、顯示時，添加動畫讓它更自然過渡。它是vue內(nèi)置組件，不需要引入注冊就可以直接使用。
在什么情況會出現(xiàn)過渡？
1. v-if 切換
2. v-show 切換
3. 動態(tài)組件 component 切換
4. 改變特殊的 key 屬性
前幾個比較好理解，最后一個用到了 key 值變化導致元素強制更新。下面例子的key值變化，vue會認為這里產(chǎn)生了一個新元素，之前的會被刪除，從而導致過渡。
<script setup>
import { ref } from 'vue'
const keyValue = ref(1)
</script>
<template>
<button @click="() =>keyValue = Math.random()">Toggle</button>
<Transition >
<p :key="keyValue">hello</p>
</Transition>
</template>
<style>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>2. 添加過渡效果
如果不給命名的話，添加動畫效果的默認類名前綴是 v-
v-enter-active ：進入動畫的生效狀態(tài)
v-leave-active ：離開動畫的生效狀態(tài)
v-enter-from ：剛進入動畫的開始狀態(tài)
v-leave-to ：離開動畫時的結(jié)束狀態(tài)
v-enter-to ：剛進入動畫的結(jié)束狀態(tài)
v-leave-from ：離開動畫的結(jié)開始態(tài)一般前4種用得比較多，兩個生效狀態(tài)，加上進入動畫的開始狀態(tài)和離開動畫時的結(jié)束狀態(tài)。
3. 自定義過渡類名
通過 name 可以自定義 <Transition> 的過渡類名。
<Transition name="a"> ... </Transition>
.a-enter-active,
.a-leave-active {
transition: opacity 0.5s ease;
}
.a-enter-from,
.a-leave-to {
opacity: 0;
}注意：里面只能有一個根組件，但使用 v-if、v-else、v-else-if 切換顯示是可以的。如果想對列表中的元素設置過渡，可以使用 <TransitionGroup >
4. 深層元素的過渡
可以給深層級的元素設置過渡效果。
<Transition name="fade">
<div v-if="show" class="outer">
<div class="inner">
Hello
</div>
</div>
</Transition>/* 應用于嵌套元素的規(guī)則 */
.fade-enter-active .inner,
.fade-leave-active .inner {
transition: all 0.3s ease-in-out;
}
.fade-enter-from .inner,
.fade-leave-to .inner {
transform: translateX(30px);
opacity: 0;
}duration 屬性設置過渡持續(xù)的時間，單位是毫秒。
<Transition :duration="550">...</Transition>
5. 過渡的鉤子函數(shù)
<Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @enter-cancelled="onEnterCancelled" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" @leave-cancelled="onLeaveCancelled" > ... <<Transition>
6. 封裝過渡效果
<!-- MyTransition.vue -->
<script>
// JavaScript 鉤子邏輯...
</script>
<template>
<!-- 包裝內(nèi)置的 Transition 組件 -->
<Transition
name="my-transition"
@enter="onEnter"
@leave="onLeave">
<slot></slot> <!-- 向內(nèi)傳遞插槽內(nèi)容 -->
</Transition>
</template>
<style>
</style>注意：該組件樣式不要添加 scoped , 不然插槽內(nèi)沒有過渡效果。
<MyTransition> <div v-if="show">Hello</div> </MyTransition>
7. 過渡模式
可以設置屬性 mode 為 out-in 或 in-out in-out 表示當前元素先進行過渡，完成之后新元素過渡進入。通常我們更多的會使用out-in，讓當前元素先離開，然后再進行新元素的進入 。
到此這篇關于vue內(nèi)置組件Transition的詳解的文章就介紹到這了,更多相關vue內(nèi)置組件Transition內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue限制輸入數(shù)字或者保留兩位小數(shù)實現(xiàn)
這篇文章主要為大家介紹了vue限制輸入數(shù)字或者保留兩位小數(shù)實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
詳解如何實現(xiàn)Element樹形控件Tree在懶加載模式下的動態(tài)更新
這篇文章主要介紹了詳解如何實現(xiàn)Element樹形控件Tree在懶加載模式下的動態(tài)更新，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要為大家詳細介紹了vue開發(fā)簡單上傳圖片功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
.sync修飾符是Vue中用于實現(xiàn)子組件修改父組件傳遞的props值并更新到父組件的功能,它實際上是一個語法糖,將子組件的props綁定到一個名為update:propName的自定義事件上,本文給大家介紹了vue3中sync修飾符的使用,需要的朋友可以參考下2023-10-10
Vuex是專門為Vuejs應用程序設計的狀態(tài)管理工具,這篇文章主要給大家介紹了關于Vuex狀態(tài)機快速了解與實例應用的相關資料,需要的朋友可以參考下2021-06-06
這篇文章主要給大家總結(jié)介紹了關于vue工程師必會封裝的埋點指令思路知識,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了vue刷新后瞬間閃爍,無法解析的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue2中的keep-alive使用總結(jié)及注意事項
vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應的組件,減少性能消耗。本文給大家介紹vue2中的keep-alive使用總結(jié)及注意事項，需要的朋友參考下吧2017-12-12
Vue使用provide各種傳值后inject獲取undefined的問題及解決
這篇文章主要介紹了Vue使用provide各種傳值后inject獲取undefined的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
nextTick是Vue提供的一個全局API，由于Vue的異步更新策略導致我們對數(shù)據(jù)的修改不會立刻體現(xiàn)，在DOM變化上，此時如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11