Переключение незарегистрированного класса - PullRequest
Новая
       101

Переключение незарегистрированного класса

0 голосов
/ 06 августа 2020

Итак, я некоторое время работал над сборкой и через некоторое время вернулся на веб-сайты, и один из вопросов, который все еще беспокоит меня сегодня: почему я не могу изменить класс из одной анимации (open / слайд в анимацию просмотра) в другой (закрытие / слайд из анимации просмотра)? Мне требовалось установить четыре разных имени класса для достижения этой цели, например: 

.open {
    height: 50px;
    animation: keyframe 1s forwards 1 0s;
}
.opened {
    height: 50px;
}
.close {
    height: 0;
    animation: keyframe 1s reverse forwards 1 0s;
}
closed {
    height: 0;
}

А затем в моем javascript я вынужден добавить ключевой кадр, установить тайм-аут, а затем изменить его на без ключевого кадра в противном случае, если, скажем, закрытие уже произошло и осталось включенным без перехода к классу без анимации, а в javascript я делаю это go от закрытия прямо до открытия, это НЕ будет открывать анимацию? Так что мне приходилось делать что-то подобное в javascript: 

        if (window.pageYOffset == 0 && !elm.classList.contains("closed")) {
            elm.className = "close";
            setTimeout(() => {
                elm.className = "closed";
            }, 1000);
        } else if (window.pageYOffset > 0 && !elm.classList.contains("opened")) {
            elm.className = "open";
            setTimeout(() => {
                elm.className = "opened";
            }, 1000);
        }

Я хочу сделать вот что: 

        if (window.pageYOffset == 0 && !elm.classList.contains("close")) {
            elm.className = "close";
        } else if (window.pageYOffset > 0 && !elm.classList.contains("open")) {
            elm.className = "open";
        }

Но если вы это сделаете браузер, который я использую, - это Google Chrome, НЕ будет переключаться и воспроизводить анимацию, и это подводит меня к следующей части моего вопроса: какое время таймаута требуется в этом случае? Кажется, у меня должен быть хотя бы тайм-аут больше 50 мс, чтобы он зарегистрировал переключатель класса и сделал анимацию? Как рассчитать требуемый срок? Я предполагаю, что я должен создать бесконечный l oop после удаления части имени класса, а затем, когда он будет удален, активировать вторую часть добавления другого имени класса? Я должен сделать это, например: 

elm.className = "";
setTimeout(() => {
    elm.className = "new_class"
}, 50);

Этот пример показывает, как меня заставляют хотя бы удалить текущую анимацию «закрытия», дождаться тайм-аута, а затем добавить анимацию «открытия», но что Я не знаю, сколько времени требуется, чтобы этот тайм-аут был эффективным? Я видел, что использование чего-либо менее 50 мс будет отменено и не будет работать с новой анимацией.

...