vue使用Animate.css动画

最新推荐文章于 2026-05-09 07:02:54 发布

原创最新推荐文章于 2026-05-09 07:02:54 发布 · 267 阅读

0 ·

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

收录于

前端

当前文章被收录于：

前端

50 篇文章 1 人学习

前端知识

订阅专栏查看详情

功能用法

当前文章被收录于：

功能用法

31 篇文章 0 人学习

搭建插件之类的功能和用法问题

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何在Vue项目中集成和使用animate.css动画库。首先通过npm安装animate.css，然后在Vue组件中利用transition标签，设置enter-active-class和leave-active-class属性指定进入和离开时的动画效果，并通过动态绑定duration属性来控制动画时长。通过这种方式，可以轻松为Vue应用添加丰富的动画过渡效果。

Vue动画库插件animate
git地址：https://github.com/daneden/animate.css
演示地址：https://www.dowebok.com/demo/2014/98/

如何在vue项目中使用呢
一、安装

npm install animate.css --save

二、使用

<!--Vue中，要做动画或者过渡都需要加一个transition标签-->
<!--enter-active-class="animated tada"，进入生效动画直接使用animated中的tada样式-->
<!-- leave-active-class="animated bounceOutRight" ，离开生效动画直接使用animated中的bounceOutRight样式-->
<!--:duration="{enter:1000,leave:500}",表示持续时间，进来花费1000毫秒，出去花费500毫秒-->
<transition
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRigh"
  :duration="{enter:1000,leave:500}"
>
  <!--使用冒号动态绑定src地址，否则不会识别pic-->
  <!--v-if决定是否显示-->
  <img v-if="flag" :src="pic" alt="">

</transition>