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 [email protected] --save 

cnpm install [email protected] --save

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

五. 效果

六. 参考

• vue 项目如何使用animate.css