鉤子函數(shù)實(shí)現(xiàn)動(dòng)畫(huà)的方式

Vue中可以使用CSS動(dòng)畫(huà)，我們還可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)動(dòng)畫(huà)。我們?cè)?transition>標(biāo)簽中定義了一些動(dòng)畫(huà)鉤子函數(shù)，可以來(lái)實(shí)現(xiàn)動(dòng)畫(huà)。

鉤子函數(shù)可以結(jié)合CSS過(guò)渡(transitions)、動(dòng)畫(huà)(animations)使用，還可以單獨(dú)使用，示例代碼如下：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  v-bind:css="false">
</transition>

在以上代碼中，入場(chǎng)鉤子函數(shù)分別是beforeEnter(入場(chǎng)前)、enter(入場(chǎng))、afterEnter(入場(chǎng)后)和enterCancelled(取消入場(chǎng))，出場(chǎng)鉤子函數(shù)分別是beforeLeave(出場(chǎng)前)、leave(出場(chǎng))、afterLeave(出場(chǎng)后)和leaveCancelled(取消出場(chǎng))。第10行行為僅使用JavaScript過(guò)渡的元素添加v-bind:css=”false”，表示給CSS綁定了false值，Vue會(huì)跳過(guò)CSS的檢測(cè)，避免過(guò)渡過(guò)程中受到CSS的影響。

下面我們演示如何在methods中編寫(xiě)鉤子函數(shù),示例代碼如下:

methods: {
    // beforeEnter 入場(chǎng)鉤子函數(shù)
    // 動(dòng)畫(huà)入場(chǎng)之前,此時(shí)動(dòng)畫(huà)尚未開(kāi)始，設(shè)置元素開(kāi)始動(dòng)畫(huà)之前的起始樣式
    beforeEnter(el) {},
    // enter用于設(shè)置動(dòng)畫(huà)開(kāi)始之后的樣式
    enter(el, done) {
        // ...
        done()
    },
    // 在入場(chǎng)動(dòng)畫(huà)完成之后會(huì)調(diào)用
    afterEnter(el) {},
    enterCancelled(el) {},
    // 出場(chǎng)鉤子函數(shù)
    beforeLeave(el) {},
    leave(el, done) {
        // ...
        done()
    },
    afterLeave(el) {},
    leaveCancelled(el) {},
}

上述代碼中，所有的鉤子函數(shù)都會(huì)傳入el參數(shù)(el為element的縮與)，el指的是動(dòng)畫(huà)包裹的標(biāo)簽。其中，enter和 leave動(dòng)畫(huà)鉤子函數(shù)，還會(huì)傳入done作為參數(shù)，用來(lái)告知 Vue動(dòng)畫(huà)結(jié)束。在enter和 leave中,當(dāng)與CSS結(jié)合使用時(shí)，回調(diào)函數(shù)done是可選的，而當(dāng)使用JavaScript過(guò)渡的時(shí)候，回調(diào)函數(shù)done是必須的，否則過(guò)渡會(huì)立即完成。

enterCancelled和 leaveCancelled動(dòng)畫(huà)鉤子函數(shù)只應(yīng)用于v-show中。