1. 程式人生 > 實用技巧 >vue 專案如何使用animate.css

vue 專案如何使用animate.css

一 . 安裝

在命令列中執行:

使用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]

應該就木有問題了。