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

　　在前面的案例中，動畫效果都是在事件處理方法中控制的，在元素初始渲染時(頁面剛打開時)并沒有動畫效果。如果希望給元素添加初始渲染的動畫效果，可以通過給transition組件設(shè)置appear屬性來實現(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會應(yīng)用在整個過渡過程中。

　　為了使讀者更好地理解，下面我們通過例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文件，查看元素初次渲染的過渡動畫效果。

　　小提示：

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

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

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

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

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