Vue.js是一個流行的JavaScript框架，可以用于開發(fā)動態(tài)Web應(yīng)用程序。它為應(yīng)用程序提供了多個功能，其中之一是Vue的過渡效果，可以為用戶提供更好的用戶體驗。
Vue的過渡效果旨在處理元素在DOM中的添加、更新和刪除。Vue 提供了一些樣式在目標(biāo)節(jié)點被插入、更新或刪除時發(fā)生自然的變化的轉(zhuǎn)換。Vue 的過渡效果需要定義兩個 CSS 類：v-enter和v-leave-to。
<style>
.v-enter {
opacity: 0;
}
.v-enter-active {
transition: opacity 0.5s;
}
.v-leave-to {
opacity: 0;
}
.v-leave-active {
transition: opacity 0.5s;
}
</style>在目標(biāo)節(jié)點被添加到DOM 之前，v-enter類會觸發(fā)過渡的開始。在 目標(biāo)節(jié)點被插入到DOM 后，v-enter-active類會觸發(fā)過渡的持續(xù)時間。
在目標(biāo)節(jié)點被從DOM 刪除之前，v-leave-to類會觸發(fā)過渡的結(jié)束狀態(tài)。在 目標(biāo)節(jié)點被刪除后，v-leave-active類會觸發(fā)過渡的持續(xù)時間。
VUE 過渡是 VueJS 中一項重要的功能，若要使用它，需要導(dǎo)入 Vue 的 transition 組件，并將需要過渡的節(jié)點放入<transition>標(biāo)簽中。
<template>
<div>
<transition name="fade">
<p v-if="show">Hello!</p>
</transition>
<button @click="show = !show">Toggle</button>
</div>
</template>
<script>
export default {
data() {
show: true;
},
}
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>在上述代碼中，定義了一個過渡名稱為 fade 的 <transition> 標(biāo)簽。其中包含了一個條件渲染的 <p> 標(biāo)簽，其顯示或隱藏的狀態(tài)由按鈕控制。在 CSS 樣式中，定義了 fade-enter、fade-enter-active、fade-leave-to 和 fade-leave-active 四個類，用于定義節(jié)點的進入和退出過渡效果。