第一部分：Vue3中transition組件搭配過渡

開發(fā)中，我們往往想要給一個組件的顯示和消失添加某種過渡動畫，可以很好的增加用戶體驗

Vue中為我們提供一些內(nèi)置組件和API來完成動畫，利用它們我們可以方便的實現(xiàn)過渡動畫效果

在進入/離開的過渡中，會有 6 個 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?被移除)，在過渡/動畫完成之后移除。

代碼案例： 如果我們希望給單元素或者組件實現(xiàn)過渡動畫，可以使用?transition?內(nèi)

置組件來完成動畫

如果我們使用的是一個沒有name的transition，那么所有的class是以 v- 作為默認前綴 如果我們添加了一個name屬性，比如 <transition name="slide-fade"></transition> 那么所有的class會以 slide-fade 開頭 <template><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><transition name="slide-fade"><router-view/></transition> </template><style lang="less"> /* 可以為進入和離開動畫設(shè)置不同的持續(xù)時間和動畫函數(shù) */ .slide-fade-enter-active {transition: all 1.3s ease-out; }.slide-fade-leave-active {transition: all 1.8s cubic-bezier(1, 0.5, 0.8, 1); }.slide-fade-enter-from, .slide-fade-leave-to {// transform: translateX(20px);opacity: 0; } </style>

transition組件的原理

當Vue插入或刪除包含在 transition 組件中的元素時會做以下處理：

• 自動嗅探目標元素是否應(yīng)用了CSS過渡或者動畫，如果有，那么在恰當?shù)臅r機添加/刪除 CSS類名
• 如果 transition 組件提供了JavaScript鉤子函數(shù)，這些鉤子函數(shù)將在恰當?shù)臅r機被調(diào)用
• 如果沒有找到JavaScript鉤子并且也沒有檢測到CSS過渡/動畫，DOM插入、刪除操作將會立即執(zhí)行

第二種：transition組件搭配動畫

<template><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><transition name="bounce"><router-view/></transition> </template><style lang="less"> .bounce-enter-active {animation: bounce-in 0.5s; } .bounce-leave-active {animation: bounce-in 0.5s reverse; } @keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.25);}100% {transform: scale(1);} } </style>

第二部分：Vue2單元素、組件的過渡

作用：在插入、更新或移除 DOM元素時，在合適的時候給元素添加樣式類名。

過渡的類名

v-enter：定義進入過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。

v-enter-active：定義進入過渡生效時的狀態(tài)。在整個進入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數(shù)。

v-enter-to：2.1.8 版及以上定義進入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時?v-enter?被移除)，在過渡/動畫完成之后移除。

v-leave：定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時立刻生效，下一幀被移除。

v-leave-active：定義離開過渡生效時的狀態(tài)。在整個離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數(shù)。

v-leave-to：2.1.8 版及以上定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時?v-leave?被刪除)，在過渡/動畫完成之后移除。

?使用<transition>包裹要過渡的元素，并配置name屬性：

<template><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition> </div> </template> <script> // vue2項目懶得創(chuàng)建，使用vue3項目代替 import { ref } from 'vue' export default {setup () {const show = ref(true)return { show }} } </script> <style lang="less" >.fade-enter-active, .fade-leave-active {transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0; } </style>

總結(jié)

以上是生活随笔為你收集整理的Vue3和Vue2组件单元素的过渡的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。