vue 項(xiàng)目如何使用animate.css

一 、安裝

在命令行中執(zhí)行：

使用npm或者cnpm安裝

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

使用yarn安裝

yarn add animate.css

二、引入

在main.js全局引入

import animated from ‘a(chǎn)nimate.css‘vue.use(animated)

三、頁(yè)面使用

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

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

四、踩坑問(wèn)題

如果完成前三部還是沒(méi)有效果，可能就是animate.css版本的問(wèn)題了，直接安裝的都是最新版本，而vue官網(wǎng)引入的是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

應(yīng)該就木有問(wèn)題了。

本文完?