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

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

Web前端培訓(xùn):appear初始渲染動(dòng)畫的方式

更新時(shí)間:2022年09月21日15時(shí)59分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

  在前面的案例中,動(dòng)畫效果都是在事件處理方法中控制的,在元素初始渲染時(shí)(頁面剛打開時(shí))并沒有動(dòng)畫效果。如果希望給元素添加初始渲染的動(dòng)畫效果,可以通過給transition組件設(shè)置appear屬性來實(shí)現(xiàn)。示例代碼如下:

<transition appear appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class"
appear-active-class="custom-appear-active-class">
</transition>

  在上述代碼中,appear表示開啟此特性,appear-class表示初始class樣式,appear-to-class表示過渡完成的class樣式,appear-active-class會(huì)應(yīng)用在整個(gè)過渡過程中。

  為了使讀者更好地理解,下面我們通過例4-3進(jìn)行演示。

  【例4-3】

  (1)創(chuàng)建:C:\vue\chapter04\demo03.html文件,具體代碼如下:

<link rel="stylesheet" href="animate.css">
<div id="app">
    <button @click="show=!show">顯示/隱藏</button>
    <transition appear appear-active-class="animated swing"
    enter-active-class="animated bounceIn"
    leave-active-class="animated bounceOut">
     <div v-if="show">過渡文字效果</div>
    </transition>
</div>
<script>
var vm = new Vue({ el: '#app', data: { show: true } })
</script>

  在上述代碼中,第4行在標(biāo)簽中定義了appear和appear-active-class屬性。

  (2)在瀏覽器中打開demo03.html文件,查看元素初次渲染的過渡動(dòng)畫效果。

  小提示:

  關(guān)于appear-class、appear-to-class、appear-active-class三者的排序問題,分為以下4種情況。

  (1)如果appear-active-class排在最后一個(gè),只有appear-active-class屬性起作用。

  (2)如果appear-active-class排在第一個(gè),它本身不起作用。此時(shí)由appear-class過渡到appear-to-class屬性。

  (3)如果appear-class排在第一個(gè),它本身不起作用。由appear-active-class過渡到appear-to-class屬性。

  (4)如果appear-to-class排在第一個(gè),它本身不起作用,由appear-class過渡到appear-active-class屬性。

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