vue中使用animate.css

本文介绍: 如何在vue中使用 animate.css

vue中使用 animate.css

前言
一、animate.css？
二、使用步骤
总结

前言

在网上找了好多的文章，在vue中如何使用animate.css 但是都不是太详细所以在这里自己写一个详细一点的文章
 官方文档

一、animate.css？

animate.css是一个使用CSS3的animation 制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。

二、使用步骤

1.下载库

代码如下（示例）：

npm install animate.css 这个话直接下载的是最新版本的
npm install animate.css@0.0.0 这个@后面表示的是版本号 表示下载指定版本的

使用在线的cdn库 在vue项目中的index.html页面引入

CDN链接

&lt;!DOCTYPE html&gt;
&lt;html lang=""&gt;
  &lt;head&gt;
    &lt;link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.min.css" rel="stylesheet"&gt;
  </head&gt;
  <body&gt;
    <div id="app"&gt;</div&gt;
    <!-- built files will be auto injected -->
  </body>
</html>

2.引入库

代码如下（示例）：
在vue的 main.js 文件中直接引入

import animated  from 'animate.css'

3.使用方式

我这个是配合v ue的Tr ansition 组件使用的，实际使用根基自己项目实际情况自行使用
因为animate.c ss的版本不同，所以在使用方式上也有所不同

	4.0.0版本的使用方式也就是最新的使用方式

 <transition enter-active-class="animate__animated animate__fadeInUp"
 leave-active-class="animate__animated animate__fadeInDown">
      <div v-show="show">
      	。。。。。。一些代码片段
      </div>
  </transition>

	4.0.0版本一下的使用方式也就是老版本的使用方式

<transition enter-active-class="animated fadeInUp"
leave-active-class="animated fadeInDown">
    <div v-show="show">
       。。。。。。一些代码片段
    </div>
</transition>