快捷導(dǎo)航

Vue3使用transition組件改變DOM屬性的方式小結(jié)

更新時間：2024年01月02日 16:33:09 作者：超捻

這篇文章主要為大家詳細介紹了Vue3中使用transition組件改變DOM屬性的常用方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1、<transition> 標簽

使用 name 屬性來定義class 來實現(xiàn)DOM的屬性的過渡

<template>
   <div>
      <button @click="flag = !flag">switch</button>
      <!-- 用法1  name屬性定義class-->
      <transition name="fade">
        <div v-if="flag" class="box">name屬性定義class</div>
      </transition>
    </div>
 </template>
      
<script setup lang='ts'>
    import{ref} from 'vue'

    const flag = ref<boolean>(true)
    
</script>


<style scoped lang="scss">
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .fade-enter-from { // 進入 從XX 開始
    width: 0;
    height: 0;
}
    .fade-enter-active {
        // 過程
        transition: all 1.5s ease;
    }
    .fade-enter-to { // 進入 到 XX 結(jié)束
        width: 200px;
        height: 200px;
        transform: scale(1.2); // 放大1.2倍
    }

    .fade-leave-from { // 離開 從XX 開始
        width: 200px;
        height: 200px;
    }
    .fade-leave-active {
        // 過程
        transition: all 1.5s ease;
    }
    .fade-leave-to { // 離開 到 XX 結(jié)束
        width: 0;
        height: 0;
    }
</style>

頁面效果：

可以通過name屬性，綁定指定name的class，靈活定義過渡的進入和離開時的效果；

上面方式缺點是class.xxx-enter-from -enter-from部分是固定的, 如果想要定義整個class名，可以使用<Transition> 另外屬性；

進入：enter-from-class、enter-active-class、enter-to-class、

離開：leave-from-class、leave-active-class、leave-to-class

<template>
   <transition 
   enter-from-class="dada-enter-from"
   enter-active-class="dada-enter-active"
   enter-to-class="dada-enter-to"
   leave-from-class="dada-leave-from"
   leave-active-class="dada-leave-active"
   leave-to-class="dada-leave-to">
       <div v-if="flag" class="box">自定義類名</div>
   </transition>
</template>
...
<style scoped lang="scss">
dada-enter-from {
   width: 0;
   height: 0;
}
.dada-enter-active {
   // 過程
   transition: all 1.5s ease;
}
.dada-enter-to { // 進入 到 XX 結(jié)束
   width: 200px;
   height: 200px;
   transform: scale(1.2); // 放大1.2倍
}

.dada-leave-from {
   width: 200px;
   height: 200px;
}
.dada-leave-active {
   // 過程
   transition: all 1.5s ease;
}
.dada-leave-to { // 離開 到 XX 結(jié)束
   width: 0;
   height: 0;
}
</style>

頁面效果：同上

<transition> + 動畫庫 animate.css

安裝： npm install animate.css --save或yarn add animate.css

<transition 
:duration="1000"
enter-active-class="animate__animated animate__flipInX"
leave-active-class="animate__animated animate__fadeOutDown">
        <div v-if="flag" class="box font-12">結(jié)合第三方類庫 animate.css</div> 
</transition>
      
<script setup lang='ts'>
import 'animate.css'
</script>

屬性duration：number｜{enter:number, leave:number} 是指動畫時長；如果進入和離開定義相同時長，值可定義number類型，如果進入和離開定義不同時長，值可定義object類型；

注意，使用class時不要漏加特定classanimate__animated，

頁面效果：

使用第三方CSS動畫庫，過渡效果豐富，減少自己寫CSS代碼，直接添加對應(yīng)效果的class即可；

豐富有趣的交互效果，往往只有class是不夠的，還需要通過JS代碼控制動畫來實現(xiàn)；

想要通過 Javascript來控制過渡動畫，首先理解過渡的時機，動畫分為進入和離開，進入有：進入前、進入、進入后，同樣離開: 離開前、離開、離開后，那么在不同時機中，觸發(fā)JavaScript 邏輯即可；

<transition> 對應(yīng)的事件：

@before-enter：進入之前
@before-leave：離開之前
@enter：進入時
@leave：離開時
@after-enter：進入之后
@after-leave：離開之后
@enter-cancelled：進入中斷
@leave-cancelled (v-show only)：離開中斷

<template>
 <transition 
    @before-enter="EnterFrom"
    @enter="EnterActive"
    @after-enter="EnterTo"
    @enter-cancelled="EnterCancel"
    @before-leave="LeaveFrom"
    @leave="LeaveActive"
    @after-leave="LeaveTo"
    @leave-cancelled="LeaveCancel" >
    <div v-if="flag" class="box">8個 生命周期</div> 
</transition>
</template>
<script setup lang='ts'>
    // 進入
    const EnterFrom = (el:Element) => {
        console.log('動畫進入之前EnterFrom');
    }
    const EnterActive = (el:Element, done: gsap.Callback) => {
        console.log('進入時 EnterActive');
    }
    const EnterTo = (el:Element) => {
        console.log(el,'動畫進入之后 EnterTo');

    }
    const EnterCancel = (el:Element) => {
        console.log(el,'動畫進過渡效果 被打斷時 EnterCancel');
    }
    
    // 離開
    // el DOM 節(jié)點
    const LeaveFrom = (el:Element) => {
        console.log(el, '動畫離開之前LeaveFrom');
    }
    const LeaveActive = (el:Element, done:Function) => {
        console.log(el,'離開時 LeaveActive');
        done()
    }
    const LeaveTo = (el:Element) => {
        console.log(el,'動畫離開之后 LeaveTo');
    }
    const LeaveCancel = (el:Element) => {
        console.log(el,'動畫離開過渡效果 被打斷時------');
    }
    


</script>

過渡進入時觸發(fā)：

過渡離開時觸發(fā)：

過渡中斷是什么時候出發(fā)呢，當進入過程中立馬切換為離開時就會觸發(fā)中斷的函數(shù)了；當理解了出發(fā)函數(shù)鉤子的時機，可以結(jié)合優(yōu)秀的動畫庫，精準的實現(xiàn)效果；

2、<transition-group> 標簽

單節(jié)點動畫可以使用<transition>，多節(jié)點可以使用 <transition-group>;
特點：

默認情況下它不會渲染一個包裹元素，但是可以通過tag attribute 指定渲染一個元素， <transition-group tag="div">或 <transition tag="section"> 實際生成DOM標簽div 或 section 包一層；
過渡模式下不可用，因為我們不再相互切換特有的元素
內(nèi)部元素總是需要提供一個唯一的 key attribute值
CSS過渡的類型將會應(yīng)用在內(nèi)部的元素中，而不是這個組/容器本身

列表的移動過渡示例：

<template>
   <!-- 列表的移動過度示例 
   技術(shù)點： <transition-group> 組件還有一個特殊之處除了進入和離開，transition-group還可以為定位的改變添加動畫
         第三方庫： lodash  npm install lodash --S  注意在ts 下 還需要安裝類型聲明文件庫 npm i --save-dev @types/lodash
-->
 <div>
    <button @click="random">random</button>
    <transition-group move-class="move" class="wrap" tag="div">
      <div class="item" v-for="item in list" :key="item.id">{{ item.number }}</div>
    </transition-group>
 </div>

</template>
<script setup lang='ts'>
import {ref} from 'vue'
import _ from 'lodash' // 需要安裝聲明文件 npm i -D @types/lodash

let list = ref(Array.apply(null, {length:81} as number[]).map((_, index) => {
    return {
        id: index,
        number: (index % 9) + 1
    }
}))

console.log(list, 'list');
const random = () => {
    list.value = _.shuffle(list.value)
}
</script>
<style scoped lang="scss">
.wrap {
    display: flex;
    flex-wrap: wrap;
    width: calc(25px * 9 + 9px);
    .item {
        width: 25px;
        height: 25px;
        border: 1px solid #ccc;
        display: flex;
        justify-self: center;
        align-items: center;
    }
}
.move {
    transition: all 1s;
}
</style>

狀態(tài)的過渡:

<template>
   <input type="number" step="20" v-model="num.current">
       <div style="font-size: 30px; margin-left: 20px;">{{ num.tweenedNumber.toFixed() }}
       </div>
</template>
<script setup lang='ts'>
import {reactive, watch} from 'vue'
import gsap from 'gsap'

 const num = reactive({
    current: 0,
    tweenedNumber:0
 })

 watch(() => num.current, (newVal) =>{
    gsap.to(num, {
        duration: 1,
        tweenedNumber: newVal
    })
 })
</script>