饿了么弹窗，设置弹窗不关闭，点击外面弹窗抖动效果

本文已参与「新人创作礼」活动，一起开启掘金创作之路。
1.首先设置全局的动画css

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes bounce {

  0%,
  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

封装函数

export function animate(e) {
  let dome = e.dialogRef.parentNode
  dome.addEventListener('click', () => {
    e.dialogRef.classList.add("bounce", "animated", "infinite");
    setTimeout(() => {
      e.dialogRef.classList.remove("bounce", "animated", "infinite");
    }, 1000);
  })
}

然后当点击显示表格弹窗的时候将弹窗的调用该函数，将dialog的ref传入即可

  animate(dialogRefs.value);