Vue中使用 Animate.css
https://www.dowebok.com/demo/2014/98/
主要步骤:
第一步:
cnpm install animate.css --save
npm install animate.css --save
yarn add animate.css
第二步:
在main.js中
import animated from 'animate.css' Vue.use(animated)
使用:
Animate.css v4进行了一些改进,改进了动画,并添加了动画,因此值得进行升级。但这也带来了重大变化,我们为所有Animate.css类添加了前缀为animate_因此无法直接迁移
在package.json里面可以看到我的版本,我的当前版本是 ^4.1.1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vCaLQ3ZV-1611303718299)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210122161255351.png)]
所以 我在使用动画的时候,要加上前缀 animate_
>V4版本使用
//vue模板中
<div>
<!-- 直接使用animated中的动画class名,注意: 必须使用animate_这个class名,否则动画则无效果 -->
<div class="out-drawer animate__animated animate__slideInLeft"></div>
</div>
<V4版本使用
//vue模板中
<div>
<!-- 直接使用animated中的动画class名,注意:必须使用animated这个class名,否则动画会无效 -->
<div class="box animated bounceInDown"></div>
</div>
lass=“box animated bounceInDown”>
```调试在文件的开头。