Web前端培訓(xùn)：自定義類名結(jié)合animate.css實(shí)現(xiàn)動(dòng)畫

　　animate.css是一個(gè)跨瀏覽器的CSS3動(dòng)畫庫(kù)，它內(nèi)置了很多經(jīng)典的CSS3動(dòng)畫。使用起來很方便。下面我們通過例4-2講解如何使用自定義類名和animate.css庫(kù)實(shí)現(xiàn)動(dòng)畫效果。

　　【例4-2】

　　(1)從animate.css官方網(wǎng)站獲取animate.css文件，保存到chapter04目錄中。

　　(2)創(chuàng)建C:\vue\chapter04\demo02.html文件，引入animate.css，如下所示：

<link rel="stylesheet" href="animate.css">

　　(3)在demo02.html文件中編寫HTML結(jié)構(gòu)，具體代碼如下：

<div id="app">
  <button @click="show=!show">顯示/隱藏</button>
  <transition enter-active-class="animated bounceInLeft"
   leave-active-class="animated bounceOutLeft">
    <p v-if="show">過渡文字效果</div>
  </transition>
</div>

　　上述代碼中，第3、4行給標(biāo)簽設(shè)置了enter-active-class與leave-active-class兩個(gè)屬性，用來自定義類名，屬性值為animate.css動(dòng)畫庫(kù)中定義好的類名。例如，第3行的“animated bounceInLeft”包含兩個(gè)類名，animated是基本的類名，任何想實(shí)現(xiàn)動(dòng)畫的元素都要添加它;bounceInLeft是動(dòng)畫的類名，bounceInLeft表示入場(chǎng)動(dòng)畫，bounceOutLeft表示出場(chǎng)動(dòng)畫。

　　(4)在demo02.html文件中編寫JavaScript代碼，具體代碼如下：

　　(5)保存代碼，在瀏覽器中運(yùn)行程序。單擊“顯示/隱藏”按鈕，即可看到文字顯示或隱藏的動(dòng)畫效果。