vue css 实现类似qq窗口抖动效果vue css 实现类似qq窗口抖动效果思路：通过css 写几个关键帧，实现动画

思路：通过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>

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);