我创建了一个基本的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);
}
}
您需要使用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>