我如何编写一个循环或函数，使数字随着每次鼠标点击而摇动

Question

我创建了一个基本的javascript计数器。我想在每次点击计数器时对每个数字应用一个转换比例。（基本上每次单击计数器时，我都希望数字稍微增长，然后返回到基本大小）。

我不知道如何循环，这样它就会在每次递增或递减时发生。

下面是我的代码：

let addButton = document.querySelector(".btn-add");
let subButton = document.querySelector(".btn-lower");
let num = document.querySelector("h3");
let start = 0;
let colorChange = () => {
    if (start > 0) {
        num.classList.add("positive");
    } else if (start < 0) {
        num.classList.add("negative");
    } else {
        num.classList.remove("positive");
        num.classList.remove("negative");
    }
};



addButton.addEventListener("click", () => {
    start++;
    num.innerHTML = start;
    colorChange();
    
});
subButton.addEventListener("click", () => {
    start--;
    num.innerHTML = start;
    colorChange();
});

这里是我要添加的动画

.wiggle {
    animation: shake 250ms ease-in-out;
}

// h3 {

// }
@keyframes shake {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

Answer 1

您需要使用AnimationEnd事件每次删除wiggle类并将其添加到colorChange（）中

null

let addButton = document.querySelector(".btn-add");
let subButton = document.querySelector(".btn-lower");
let num = document.querySelector("h3");
let start = 0;

// remove wiggle class when the animation is done
num.addEventListener('animationend', function(){
  this.classList.remove('wiggle')
});



let colorChange = () => {
    if (start > 0) {
        num.classList.add("positive");
    } else if (start < 0) {
        num.classList.add("negative");
    } else {
        num.classList.remove("positive");
        num.classList.remove("negative");
    }
    num.classList.add('wiggle')
};


addButton.addEventListener("click", () => {
    start++;
    num.innerHTML = start;
    colorChange();
    
});
subButton.addEventListener("click", () => {
    start--;
    num.innerHTML = start;
    colorChange();
});

.wiggle {
    animation: shake 250ms ease-in-out;
}

// h3 {

// }
@keyframes shake {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.positive{color:green}
.negative{color:red}

<h3>0</h3>
<button class="btn-add">+</button>
<button class="btn-lower">-</button>