时间戳

首页 > 解决方案 > 通过设置 timeStabilizer 函数使用 Javascript 触发同步的 CSS 动画

javascript - 通过设置 timeStabilizer 函数使用 Javascript 触发同步的 CSS 动画

问题描述

我想为以下按钮触发一个简单的闪烁动画，例如。

<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>

问题是当按下任何按钮时，它们会在自己的阶段开始闪烁（它们不会同步）。因此，为此，我通过添加一个计算与我所称的第二个拆分的差异的函数timeStabilizer()（在本例中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

该函数在将简单的 console.log 函数作为参数传递时有效，但嵌入 CSS 类的切换代码时，它将不起作用

document.querySelectorAll('button').forEach( i => {
    i.addEventListener('click', secondStabilizer( () => {
         i.classList.toggle('pressed');
    }));
});

方法好吗？为什么在我的情况下不起作用？

标签： javascriptcssanimationeventstime

解决方案

推荐阅读