vue css 实现类似qq窗口抖动效果

最新推荐文章于 2023-07-05 11:26:43 发布

青青子衿~~

最新推荐文章于 2023-07-05 11:26:43 发布

阅读量489

点赞数

分类专栏： vue 动画前端文章标签： css vue.js css3

本文链接：https://blog.csdn.net/weixin_45727272/article/details/125084846

版权

前端同时被 3 个专栏收录

54 篇文章 2 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

动画

11 篇文章 0 订阅

订阅专栏

窗口抖动效果

思路：通过css 写几个关键帧，实现动画，控制动态类名实现点击抖动

css

@keyframes jitter {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(10px, 0px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(0px, 10px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.jitter {
  animation: jitter 0.1s 4 linear;
}

html

		<div class='configPop'></div>

js


    function setjitter() {
      event.stopPropagation();
      let dom = event.target;
      //判断是否是父级div对象触发的事件
      if (dom != this) return false;
      //添加类型jitter动画
      dom.classList.add("jitter");
      //200毫秒后删除动画
      setTimeout(() => {
        dom.classList.remove("jitter");
      }, 200);
    }
    //注意addEventListener方法无需 ()调用，也无需传入event
    dialog.addEventListener("click", setjitter);