vue2.x中使用animate.css

最新推荐文章于 2026-05-23 07:35:51 发布

原创最新推荐文章于 2026-05-23 07:35:51 发布 · 1.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #animate.css

vue2 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在Vue2.x环境中如何使用animate.css，包括安装、全局及局部引用方法，并提供了不同方式的使用示例，如通过name属性设置载入载出动画，以及通过In/Out类名实现动画效果。

最近在学习VUE+animate.css，入门遇到一些坑。先上几个链接：

animate.css官网：https://animate.style/#migration；

animate.css下载地址：https://github.com/asika32764/vue2-animate；

vue环境下使用animate.css：https://www.npmjs.com/package/vue2-animate；

1.vue环境，安装animate.css模块：

cnpm install vue2-animate -S

这里有个坑，之前一直没进入到项目文件中进行安装，安装后一直提示我找不到这个模块。解决办法就是进入项目目录中执行命令即可。

2.在main.js 中引入animate.css：

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

3.使用方式，有以下几种方式：

方式一：局部引用，只在一个组件下使用，前提是需要下载animate.css文件。

使用：

要用animate.css，需要做的就是导入它。局部的导入的话，就在当前的.vue文件中的style标签中导入：

@import "../animate.css"; /*路径根据自己的位置导入*/

组件中写一个class，如下：

<p class="new" v-if="flag2">Animate</p>

style处引入animate动画，如下：

<style scoped>
@import "../animate.css";
  .new{
    animation: flash;
    animation-duration: 2s;
  }
</style>

其他效果自行研究。

方式二：全局使用，前提是：安装animate.css模块，再在main.js中导入。具体见上文。

使用：

1>基本的使用就是在过渡元素上使用对应的name属性

<transition-group name="fadeLeft" tag="ul">
    <li v-for="item in items" v-bind:key="item">
        {{ item }}
    </li>
</transition-group>

2>使用不同的载入载出动画
》》》第一种：使用custom-classes-transition,需要在不同的载入载出动画上加-enter和-leave后缀

<button v-on:click="getHide">点击显示/隐藏</button>
<transition
  name="custom-classes-transition"
  enter-active-class="bounceLeft-enter"
  leave-active-class="bounceRight-leave"
>
  <p v-if="show">hello</p>
</transition>

这种暂时不清楚为啥没生效，等后期找到原因后再完善。

3>》》》第二种：使用in/out类名在动画名后面加上In或者Out

<button v-on:click="getHide">点击显示/隐藏</button>
<transition
  name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight"
>
  <p v-if="show">hello</p>
</transition>

方式三：全局使用，使用CDN直接引用，找到VUE项目中的index.html文件，导入即可。导入后使用情况见上面。

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

其他玩法自行研究~~~，祝玩得愉快~~~