Quiero activar una animación de parpadeo simple para los siguientes botones, como.
<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> El problema es que al presionar cualquier botón, comenzarán a parpadear en su propia fase (no estarán sincronizados). Entonces, para eso, he refinado un poco la expresión al agregar una función que calcula la diferencia con la segunda división en lo que llamé timeStabilizer() (en este caso 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 eofLa función funciona cuando se pasan funciones simples de console.log como argumento, pero al incorporar el código para alternar la clase CSS, no funcionará.
document.querySelectorAll('button').forEach( i => { i.addEventListener('click', secondStabilizer( () => { i.classList.toggle('pressed'); })); });¿Es bueno el enfoque? ¿Por qué no funciona en mi caso?