如何使用JavaScript禁用CSS转换，更新样式，然后快速恢复转换

Posted 2021-04-29

我正在构建一个CSS和javascript时钟，它使用transform: rotate(xdeg)旋转时钟指针。 CSS transition属性用于平滑每个手的旋转并模拟真实的时钟。手是divs绝对定位在top: 50%和left: 50%开始，并在指向12点时旋转-90度。

所以秒针的完整周期是每秒增加6度，从-90度到264度，然后再回到-90度。问题是，当从264度到-90度（59秒到0秒）时，应用于手的过渡使得手在时钟周围向后移动。

我已经尝试检查秒针何时达到​​59秒（transform: rotate(264deg)），通过在元素上设置no-transition类暂时禁用转换，将transform属性更改为rotate(-96deg）这与rotate(264deg)的外观相同，然后删除no-transition类。这应该平滑过渡，因为旋转从-96deg变为-90度。见下面的代码。

JavaScript的：

const secondsHand = document.querySelector('.seconds-hand');

function setTime(){
    const now = new Date();
    const seconds = now.getSeconds();

    let secondsDegrees = ((seconds / 60) * 360) - 90;
    secondsHand.style.transform = `rotate(${secondsDegrees}deg)`;

    if(seconds === 59){
        secondsDegrees = -96;
        secondsHand.classList.add('no-transition');
        secondsHand.style.transform = `rotate(${secondsDegrees})`;
        secondsHand.classList.remove('no-transition');
    }

// Code to handle other hands of the clock goes here

}

CSS：

.no-transition {
    transition: none !important;
}

不幸的是，这不起作用。这是问题的代码：https://codepen.io/tillytoby/pen/axRByw

答案

查看您的代码，我可以看到您添加了一个类“无转换”，然后将其删除。应该像'n'秒之前那样去除。您可以使用setInterval实现此目的。校验：

if(seconds === 59){
    secondsDegrees = -96;
    secondsHand.classList.add('no-transition');
    secondsHand.style.transform = `rotate(${secondsDegrees}deg)`;
    //1000 is the delay, in this case 1000 miliseconds.
    setTimeout( function () {secondsHand.classList.remove('no-transition');},1000)
}