vue3使用animate.css

最新推荐文章于 2024-05-17 13:19:50 发布

给各位大佬递茶yao

最新推荐文章于 2024-05-17 13:19:50 发布

阅读量347

点赞数

分类专栏：前端学习文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_48321582/article/details/129627003

版权

前端学习专栏收录该内容

14 篇文章 2 订阅

订阅专栏

网站
npm install animate.css --save
在main.js里面引入import "animate.css
<h1 class="animate__animated animate__bounce">yyy</h1>
动画效果是在进入页面的时候立刻生效，怎么可以实现点击的时候生效呢？

<div
   class="shadow size flex-column br5 m3"
   :class="{ 'animate__animated animate__bounce': isAnimated }"
   @click="animated"
 >
const isAnimated = ref(false);
const animated = function () {
  //点击,动画效果
  isAnimated.value = true;
  //一键清理
  //需要加异步效果最后状态更改为初始值吗
  // isAnimated.value = false;
  // setInterval(0, () => {
  //   //不生效，只有刷新页面的时候才生效
  //   isAnimated.value = false;
  // });
};