首頁技術文章正文

content如何生成自定義的圖標?【詳細解答】

更新時間:2022-09-28 來源:黑馬程序員 瀏覽量:

IT培訓班

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

(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結構,具體代碼如下:

<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行給標簽設置了enter-active-class與leave-active-class兩個屬性,用來自定義類名,屬性值為animate.css動畫庫中定義好的類名。例如,第3行的“animated bounceInLeft”包含兩個類名,animated是基本的類名,任何想實現(xiàn)動畫的元素都要添加它;bounceInLeft是動畫的類名,bounceInLeft表示入場動畫,bounceOutLeft表示出場動畫。

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

var vm = new Vue({ el: '#app', data: (show:true) })

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


分享到:

Java培訓班課程javaee

Python培訓機構python大數(shù)據(jù)

web前端培訓課程升級V8.5web

AI+設計培訓課程ui

大數(shù)據(jù)培訓課程cloud

軟件測試培訓課程test

c

新媒體運營培訓netmarket

產(chǎn)品經(jīng)理培訓課程pm

linux培訓Linux

movies

智能機器人培訓robot

電商視覺設計課程uids

AI

集成電路應用開發(fā)(嵌入式)培訓課程jdbc

在線咨詢 我要報名
和我們在線交談!