Vue中使用 Animate.css

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”>

```

调试在文件的开头。