vue项目中使用Animate.css动画库，解决在vue项目中使用Animate.css动画库没有效果问题

一 . 安装

在命令行中执行：

使用npm或者cnpm安装

npm install animate.css --save  或 cnpm install animate.css --save

二. 引入

在main.js全局引入

import animated from 'animate.css'
Vue.use(animated)

三. 页面使用

通过自定义过渡类名来使用动画库的效果，添加类名 animated ，bounceIn，bounceOut是需要的动画效果

<template>
  <div class="hello">
    <h1>使用Animate.css动画库:</h1>
    <button @click="showAnimate = !showAnimate">Toggle render</button>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated bounceIn"
      leave-active-class="animated bounceOut"
    >
      <p v-if="showAnimate">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      showAnimate: true,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

打开页面会发现并没有效果，下面是解决方法

四. 踩坑问题

如果完成前三部还是没有效果，可能就是animate.css版本的问题了

直接安装的都是最新版本，而vue官网引入的是3.5.1版本

更换一下版本：

先卸载：

npm或cnpm卸载：

npm uninstall animate.css --save

cnpm uninstall animate.css --save

重新安装：

npm或cnpm安装：

npm install animate.css@3.5.1 --save 

cnpm install animate.css@3.5.1 --save

安装完成后重启项目解决问题!

五. 效果

六. 结尾

我是圆圆，如果我的文章对你的学习成长有所帮助，欢迎 点 赞 👍 支持，您的 点 赞 👍 支持是我进行创作和分享的动力！

如果有问题可以留言评论或者私信我，我都会一一解答~笔芯🤞

七. 参考

• vue 项目如何使用animate.css