animate.css在vue項目中的使用教程

在vue項目中使用動畫其實有多種方式，可以使用vue中的過渡transition，可以使用animate動畫與transition配合使用，也可以單獨使用animate動畫庫（詳情可見vue官網-過渡：過渡），下面我們開始介紹在vue中單獨使用animate動畫，其實也非常簡單，兩步留可以實現：

第一步：安裝：

在命令行中執行：npm install animate.css --save

第二步：引入及使用：

main.js中：

import animated from 'animate.css' // npm install animate.css --save安裝，在引入
Vue.use(animated)

使用：

vue模板中：

<div class="ty">
 <!-- 直接使用animated中的動畫class名，注意：必須使用animated這個class名，否則動畫會無效 -->
 <div class="box animated bounceInDown"></div>
</div>

總結

以上所述是小編給大家介紹的animate.css在vue項目中的使用教程，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com