vue中使用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链接

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

2.引入库

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

import animated  from 'animate.css'

3.使用方式

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

	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>

总结

本片文中主要讲述了在vue中如何对animate.css进行安装、引入和使用，没有什么难点，只要是版本的问题对使用的方式有所影响。

# css # vue.js # css3 # 前端
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign