Как отключить переходы CSS, обновить стили, а затем быстро восстановить переходы с помощью JavaScript

#javascript #css #css-transitions

#javascript #css #css-переходы

Вопрос:

Я создаю часы CSS и JavaScript, которые используют transform: rotate(xdeg) для поворота стрелок часов. Свойство CSS transition используется для сглаживания каждого поворота стрелки и имитации реальных часов. Стрелки — это divs, абсолютно расположенные в top: 50% и left: 50% для начала, и повернутые на -90 градусов, когда они направлены в сторону 12 часов.

Итак, полный цикл для секундной стрелки заключается в увеличении на 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

1. Рассматривали ли вы возможность настройки поворота на 270 градусов, а затем немедленного отключения перехода и сброса его обратно на -90 градусов, прежде чем включить переход и позволить ему продолжаться?

Ответ №1:

Глядя на ваш код, я вижу, что вы добавляете класс ‘no-transition’, а затем удаляете его. Удаление должно быть произведено примерно за ‘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)
}