窗口抖动效果
思路:通过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;
if (dom != this) return false;
dom.classList.add("jitter");
setTimeout(() => {
dom.classList.remove("jitter");
}, 200);
}
dialog.addEventListener("click", setjitter);