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

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

五. 效果

在这里插入图片描述

六. 结尾

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

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

七. 参考

  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值