VueAnimate.css 是一款 Vue.js 框架下的动画库，它为我们提供了丰富多彩的动画效果，可以给网站/应用程序带来生动、有趣的交互体验。本文将介绍 VueAnimate.css 的基本使用、常用动画效果、页面过渡动画、代码片段等方面内容，为大家深入了解此库做出详细介绍。

一、基本使用

VueAnimate.css 的使用非常简单，我们只需要引用 animate.css 和 VueAnimate.css 后，在 HTML 中添加需要显示动画效果的元素，并绑定对应的动画类名。

// main.js
import Vue from 'vue';
import VueAnimate from 'vue-animate-css';

Vue.use(VueAnimate);

// template

  

上述代码中，我们首先在 main.js 中引入 VueAnimate，并在 HTML 中添加一个按钮和一个 v-show 的元素，当点击按钮时，元素会通过添加 fadeIn 类名而显示出 “hello” 内容的淡入效果。

二、常用动画效果

VueAnimate.css 支持 animate.css 的所有动画效果，这里挑选一些常用的动画效果介绍如下：

1. bounceIn/bounceOut

这主要用于活跃/不活跃表现或已知条件的报错提示：

当点击按钮时，元素由于添加了 bounceIn 动画类名，因此会显示出反复弹跳的动画效果。

2. fadeIn/fadeOut

这种效果在像提示框这样的元素上很常见，在刚开始没有内容的情况下隐藏，当有内容需要提示时慢慢呈现渐变动画：

上述代码中，我们同样是通过添加 fadeIn 类名来触发元素的渐变淡入效果，当需要隐藏元素时，我们可以添加 fadeOut 类名来达到淡出效果。

3. rotateIn/rotateOut

这种效果常见于菜单旋转展开时的动画效果。

三、页面过渡动画

除了元素的基本动画效果，VueAnimate.css 还支持在路由切换时实现页面过渡动画。我们可以通过在组件的 CSS 样式中使用 transition 属性来定义过渡效果。

上述代码中，我们使用 Vue 的路由插件 router-view 来显示组件，绑定了一个 transition 组件并设置 name 为 “page”（作为唯一标识）以及动画模式为 “out-in”（表示先执行旧组件的退出动画再执行新组件的进入动画）。 同时，我们在样式中定义了 .page-enter-active 和 .page-leave-active 的属性，分别用于表示过渡进入/离开时的动画效果，而 .page-enter 和 .page-leave-to 则用于表明元素开始/结束过渡时的初始样式和结束样式。最终，可在路由切换时看到页面过渡动画的效果。

四、代码片段

除此之外，本文还提供了以下常用的代码片段： 预定义元素的动画（在 HTML 中使用）:

  
  
   
VueAnimate.css

  

当元素显示/隐藏时触发动画：

  
  
   

    Content
  
   

  

永久缩放动画效果：

Hello World!

总结

VueAnimate.css 的动画效果丰富多彩，并且在使用上十分简单，无论是在网站/应用程序的元素动画还是页面过渡动画方面都有着极为实用的功能。本文介绍了 VueAnimate.css 的基本使用、常用动画效果、页面过渡动画、代码片段等方面内容，希望能够帮助大家更好地掌握这个优秀的动画库。