Animate.css是一款酷炫豐富的跨瀏覽器動畫庫，它在GitHub上的star數至今已有5.3萬+。 在vue專案中我們可以藉助於animate.css，用十分簡單的程式碼來實現一個個炫酷的效果！（可以裝B了）

一 、安裝

在命令列中執行：

使用npm或者cnpm安裝

npm install animate.css --save  或 cnpm install animate.css --save

使用yarn安裝

yarn add animate.css

二、引入

在main.js全域性引入

import animated from ‘animate.css‘vue.use(animated)
 

三、頁面使用

類名（animated ）需要和引入的名稱相同，bounceInLeft是需要的動畫效果

<transition enter-active- leave-active->  <div v-show="tofalse"></div></transition>

四、踩坑問題

如果完成前三部還是沒有效果，可能就是animate.css版本的問題了，直接安裝的都是最新版本，而vue官網引入的是3.5.1版本。更換一下版本：

先解除安裝：

npm或cnpm解除安裝：

npm uninstall animate.css --save

cnpm uninstall animate.css --save
 

或者 yarn解除安裝：

yarn remove animate.css

重新安裝：

npm或cnpm安裝：

npm install animate.css@3.5.1 --save

 cnpm install animate.css@3.5.1 --save

yarn安裝：

yarn add animate.css@3.5.1

應該就木有問題了。

本文完〜希望能夠幫到您，點個贊吧

本文來自部落格園，作者：喆星高照，轉載請註明原文連結：https://www.cnblogs.com/houxianzhou/p/15668532.html