vue 项目如何使用animate.css

web前端开发

共 690字,需浏览 2分钟

 ·

2020-12-27 13:39


一 、安装

在命令行中执行:
使用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

应该就木有问题了。

本文完〜



浏览 5
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报