【js】点击让窗口抖动动画效果

比如说用户的未输入密码就点击登录按钮，则输入框会晃动一下提示用户需要输入，实现这种效果很简单，只需要给元素添加一个类，然后做一个关键帧动画即可

css代码

.shake {
    
    
     animation: shake 800ms ease-in-out;
 }
@keyframes shake {
    
    
    10%, 90% {
    
     transform: translate3d(-1px, 0, 0); }
    20%, 80% {
    
     transform: translate3d(+2px, 0, 0); }
    30%, 70% {
    
     transform: translate3d(-4px, 0, 0); }
    40%, 60% {
    
     transform: translate3d(+4px, 0, 0); }
    50% {
    
     transform: translate3d(-4px, 0, 0); }
}

js代码

function shake(elemId) {
    
    
    let elem = document.getElementById(elemId)
    if (elem) {
    
    
        elem.classList.add('shake')
        setTimeout(() => {
    
     elem.classList.remove('shake') }, 800)
    }
}

// 当点击某个元素时抖动
$("#div_input_qr").click(function () {
    
    
    shake("div_input_qr")
})