vue中使用animate.css

戒不掉的伤怀

已于 2024-04-23 17:32:42 修改

阅读量485

点赞数

文章标签： vue.js css javascript

于 2023-06-14 15:50:09 首次发布

本文链接：https://blog.csdn.net/u013141712/article/details/131209408

版权

文章介绍了如何在Vue项目中正确引入animate.css库，避免使用vue.use()导致的打包错误。步骤包括通过npm安装库，然后在main.js中直接导入，并在模板中使用transition组件结合enter-active-class和leave-active-class属性来实现动画效果，同时提醒在使用时无需添加animate__前缀。

摘要由CSDN通过智能技术生成

传统做法：

在main.js中引入，使用vue.use（）但是打包后会报错。因此只需要引入即可

第一步:安装

npm install animate.css

第二步：引入

在main.js中

import 'animate.css';

第三步：使用

注意，在使用时候，不要加animate__前缀了！！！！

<template>
  <div>
      <button @click="changeShow">切换动画效果</button>
      <transition
                enter-active-class="animate__animated animate__flash"
              leave-active-class="animate__animated animate__jello"
      >
          <div v-show="show">变小直到隐藏</div>
      </transition>
  </div>
</template>
<script>
  export default {
      data() {
          return {
              show: false
          }
      },
      methods: {
          changeShow() {
              this.show = !this.show
          }
      }
  }
</script>