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

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

0 голосов
/ 24 апреля 2019

Я создаю часы CSS и JavaScript, которые используют transform: rotate(xdeg), чтобы вращать стрелки часов. Свойство CSS transition используется для сглаживания вращения каждой руки и имитации реальных часов. Стрелки являются абсолютно расположенными в 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 Ответ

0 голосов
/ 24 апреля 2019

Глядя на ваш код, я вижу, что вы добавили класс '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)
}
...