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

刺骨的言语ヽ痛彻心扉 2022-11-02 11:52 478阅读 0赞

# 一 . 安装 #

在命令行中执行：

使用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