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

　　在前面的案例中，動(dòng)畫效果都是在事件處理方法中控制的，在元素初始渲染時(shí)(頁(yè)面剛打開(kāi)時(shí))并沒(méi)有動(dòng)畫效果。如果希望給元素添加初始渲染的動(dòng)畫效果，可以通過(guò)給transition組件設(shè)置appear屬性來(lái)實(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表示開(kāi)啟此特性，appear-class表示初始class樣式，appear-to-class表示過(guò)渡完成的class樣式，appear-active-class會(huì)應(yīng)用在整個(gè)過(guò)渡過(guò)程中。

　　為了使讀者更好地理解，下面我們通過(guò)例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">過(guò)渡文字效果</div>
    </transition>
</div>
<script>
var vm = new Vue({ el: '#app', data: { show: true } })
</script>

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

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

　　小提示：

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

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

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

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

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