vue集成vue2-animate插件实现常用动画

最新推荐文章于 2025-07-18 23:03:13 发布

原创最新推荐文章于 2025-07-18 23:03:13 发布 · 1.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue2-animate #css #动画

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在vue2项目中集成vue2-animate插件来实现常用动画，包括安装、引入和在组件中使用的方法。通过引入vue2-animate.min.css，并设置不同的name属性，如'Bounce'、'Fade'、'Rotate'、'Slide'、'Zoom'，可以创建各种动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2集成vue2-animate插件实现常用动画

vue的一些常用动画animate css来实现，针对vue2出现了一款插件vue2-animate,其实更权威的介绍在这里欢迎访问https://www.npmjs.com/package/vue2-animate，看一下如何使用呢？

一、安装

npm install --save vue2-animate

二、main.js引入, 加入以下这句

import 'vue2-animate/dist/vue2-animate.min.css'

三、使用，在XXX.vue界面，脚手架生成的vue页面模板都是固定的

<template>
  <transition name="bounce" enter-active-class="bounceInLeft" leave-active-    
   class="bouceOutRight">
    <div>
      ---------------------------------------
      ---------------------------------------
      ---------------------------------------
      ---------------------------------------
    </div>
  </transition>
</template>

关于name共有以下这几种

Bounce