Vue项目中使用animate.css没有效果

安装

在控制台输入命令安装 animate.css:

cnpm install animate.css

引入

在 main.js 中添加:

import 'animate.css'

使用

使用 Vue 自定义过渡的类名结合 animate.css 第三方库实现动画效果:

<template>
    <div>
        <button @click="flag=!flag">click</button>
        <transition name="demo" enter-active-class="animated bounce" leave-active-class="animated jello">
            <p v-if="flag">hello</p>
        </transition>
    </div>
</template>

问题

完成了前面的这三步之后,发现没有出现动画效果,可能是 animate.css版本的问题,因为默认下载的是最新版本。

卸载后重新下载 @3.5.1 版本后,问题解决:

// 下载最新的版本
cnpm uninstall animate.css
// 下载 @3.5.1 的版本
cnpm install animate.css@3.5.1