vue 專案如何使用animate.css
阿新 • • 發佈:2020-12-14
一 . 安裝
在命令列中執行:
使用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-class="bounceInLeft " leave-active-class="bounceOutLeft"> <div class="menu-left animated " 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 [email protected] --save
cnpm install [email protected] --save
yarn安裝:
yarn add [email protected]
應該就木有問題了。