vue中使用transform做一个呼吸提示点（基础型）

旭久

已于 2024-12-27 16:55:00 修改

阅读量471

点赞数 11

文章标签： vue.js 前端 javascript

于 2024-12-27 16:51:46 首次发布

本文链接：https://blog.youkuaiyun.com/zgx200318/article/details/144772903

版权

需求背景

在日常开发中会遇到有消息的需求这时候就会伴有一个有消息时候出现红点点内有未读消息数并伴有放大缩小闪动的效果

实现过程

红点数量直接借助了arco里的组件也可以自己去做一个

    <a-badge
                    :count="useMessage.unreadNotifyCount.unreadCount || 0"
                    :max-count="99"
                    class="dot-animate"
                  />
  .dot-animate {
    transform-origin: center center; //缩放位置 
    animation: blink 1.5s ease-in-out infinite; //，动画时长为1.5秒，使用ease-in-out的过渡效 
    果（即动画开始时加速，结束时减速），并且动画无限循环
  }
  @keyframes blink {
    0%,
    100% {
      transform: scale(0.6);
    }
    50% {
      transform: scale(1);
    }
  }
//动画开始时（0%）和结束时（100%）都会缩小到原始尺寸的0.6倍（通过transform: scale(0.6)实现），而在动画的中间点（50%）时，元素会恢复到原始尺寸（transform: scale(1)）。