I want to trigger a simple blinking animation for the following buttons such as.
<style>
@keyframes buttonBlink {
0% { opacity: 0;}
100% { opacity: 1; }
}
button {
border-radius: 25%;
animation: buttonBlink 1s steps(2, start) infinite running;
}
.pressed {
background-color: lightblue;
outline: solid 2px black;
}
</style>
<body>
<div>
<button id="button1" class="">button 1</button>
<button id="button2" class="">button 2</button>
<button id="button3" class="">button 3</button>
</div>
</body>
<script>
document.querySelectorAll('button').forEach( i => {
i.addEventListener('click', () => {
i.classList.toggle('pressed');
});
});
</script>
The problem is that when pressed any button, they will start blinking at their own phase (they will not be in sync). So for that, I have refined the a little bit the expression by adding a function that calculates the difference to the second split in what I called timeStabilizer() (in this case secondStabilizer())
// function: secondStabilizer . It will execute the executeFunction delayed to
// the next second split
function secondStabilizer(executeFunction) {
let initTime = new Date();
initTime = initTime.getTime();
nextSplitSecond = function nextSplitSecond(inputTimeSign) {
return (Math.ceil(inputTimeSign/1000) * 1000);
}
delayNeeded = nextSplitSecond(initTime) - initTime;
setTimeout(executeFunction , delayNeeded);
}
// eof eof eof eof secondStabilizer eof eof eof eof eof
The function works when passing simple console.log functions as an argument, but embedding with the code for the toggle of the CSS class, it won't work
document.querySelectorAll('button').forEach( i => {
i.addEventListener('click', secondStabilizer( () => {
i.classList.toggle('pressed');
}));
});
Is the approach good? Why is not working in my case?