Question

我正在构建一个CSS和JavaScript时钟，该时钟使用transform: rotate(xdeg)来旋转时钟。 CSS transition属性用于平滑每次指针旋转并模拟真实时钟。指针的刻度绝对位于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类。这应该使过渡变得平滑，因为旋转会从-96度变为-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

Answer 1

查看您的代码，我可以看到您添加了一个“无过渡”类，然后将其删除。删除操作应在“ 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)
}

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

1 个答案: