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

Question

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

我不知道如何循环它以便每次递增或递减时它都会发生。

这是我的代码：

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事件移除摆动class并添加到colorChange()

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>

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

How would I write a loop or function that makes the numbers shake with each mouse click

javascript

css

animation

loops

css-animations