教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

鉤子函數(shù)實現(xiàn)動畫的方式

更新時間:2022年01月24日11時45分 來源:傳智教育 瀏覽次數(shù):

Vue中可以使用CSS動畫,我們還可以通過JavaScript來實現(xiàn)動畫。我們在標(biāo)簽中定義了一些動畫鉤子函數(shù),可以來實現(xiàn)動畫。

鉤子函數(shù)可以結(jié)合CSS過渡(transitions)、動畫(animations)使用,還可以單獨使用,示例代碼如下:

<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>

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

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

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

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

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

0 分享到:
和我們在線交談!