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 ：離開動畫時的結束狀態(tài)
v-enter-to ：剛進入動畫的結束狀態(tài)
v-leave-from ：離開動畫的結開始態(tài)一般前4種用得比較多，兩個生效狀態(tài)，加上進入動畫的開始狀態(tài)和離開動畫時的結束狀態(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實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標距頂位置向上滾動效果
這篇文章主要介紹了vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標距頂位置向上滾動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
Vue常見錯誤Error?in?mounted?hook解決辦法
這篇文章主要給大家介紹了關于Vue常見錯誤Error?in?mounted?hook的解決辦法,出現(xiàn)這樣的問題,會發(fā)現(xiàn)跟聲明周期鉤子有關系,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
vue 實現(xiàn)通過vuex 存儲值 在不同界面使用
今天小編就為大家分享一篇vue 實現(xiàn)通過vuex 存儲值 在不同界面使用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關于axios不能使用Vue.use()的相關資料，文中通過示例代碼介紹的非常詳細，對大家的理解和學習具有一定的參考學習價值，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-01-01
這篇文章主要介紹了關于element-ui?單選框默認值不選中的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue-quill-editor實現(xiàn)圖片上傳功能
這篇文章主要為大家詳細介紹了vue-quill-editor實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了關于vue的列表圖片選中打鉤操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue中使用vue-count-to(數(shù)字滾動插件)詳細教程
這篇文章主要給大家介紹了關于Vue中使用vue-count-to(數(shù)字滾動插件)的相關資料,最近需要開發(fā)一個數(shù)字滾動效果,在網(wǎng)上找到一個關于vue-countTo的插件,覺得這個插件還不錯,需要的朋友可以參考下2023-09-09
vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例
這篇文章主要介紹了vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
vue開發(fā)調(diào)試神器vue-devtools使用詳解
這篇文章主要為大家詳細介紹了vue開發(fā)調(diào)試神器vue-devtools的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07