animate.css是一個跨瀏覽器的CSS3動畫庫,它內置了很多經典的CSS3動畫。使用起來很方便。下面我們通過例子講解如何使用自定義類名和animate.css庫實現動畫效果。
(1)從animate.css官方網站獲取animate.css文件,保存到chapter04目錄中。
(2)創建C:\vue\chapter04\demo02.html文件,引入animate.css,如下所示:
(3)在demo02.html文件中編寫HTML結構,具體代碼如下:
?????????? 過渡文字效果
上述代碼中,第3、4行給標簽設置了enter-active-class與leave-active-class兩個屬性,用來自定義類名,屬性值為animate.css動畫庫中定義好的類名。例如,第3行的“animated bounceInLeft”包含兩個類名,animated是基本的類名,任何想實現動畫的元素都要添加它;bounceInLeft是動畫的類名,bounceInLeft表示入場動畫,bounceOutLeft表示出場動畫。
(4)在demo02.html文件中編寫JavaScript代碼,具體代碼如下:
var?vm?=?new?Vue({?el:?'#app',?data:?(show:true)?})
(5)保存代碼,在瀏覽器中運行程序。單擊“顯示/隱藏”按鈕,即可看到文字顯示或隱藏的動畫效果。
Copyright ? 2013-2021 河南云和數據信息技術有限公司 豫ICP備14003305號 ISP經營許可證:豫B-20160281