Блог

Главная - Вопросы по программированию - Продолжительность перехода неправильно применяется с VanillaJS

Продолжительность перехода неправильно применяется с VanillaJS

#javascript #html #css #tailwind-css

#javascript #HTML #css #tailwind-css

Вопрос:

Я использую слайд-кадры из TailwindUI с помощью vanilla JS, и наложение и непрозрачность применяются правильно, но анимация происходит мгновенно, вместо использования класса duration .

https://tailwindui.com/components/application-ui/overlays/slide-overs

Вот фрагмент HTML для компонента overlay.

   <div class="hidden fixed inset-0 overflow-hidden" id="panel-container">
    <div class="absolute inset-0 overflow-hidden">
      <!--
        Background overlay, show/hide based on slide-over state.
  
        Entering: "ease-in-out duration-500"
          From: "opacity-0"
          To: "opacity-100"
        Leaving: "ease-in-out duration-500"
          From: "opacity-100"
          To: "opacity-0"
      -->
      <div class="transition-opacity ease-in-out duration-1000 opacity-100 absolute inset-0 bg-gray-600 bg-opacity-70" id="panel-overlay" aria-hidden="true"></div>
      <section class="absolute inset-y-0 right-0 max-w-full flex" aria-labelledby="slide-over-heading">
      </section>
    </div>
  </div>

… и вот скрипт, который удаляет скрытый класс в div панели-контейнера.

     const panelContainer = document.querySelector('#panel-container');

    document.querySelector('#panel-settings--open').addEventListener('click', function(event) {
      event.preventDefault();
      
      panelContainer.classList.toggle('hidden');

    });

Может кто-нибудь указать мне правильное направление того, что я здесь делаю неправильно?

Комментарии:

1. Переход применяется к opacity , поэтому вам нужно будет изменить это свойство, чтобы вызвать его.

2. Привет, Роберт, ты нашел решение для этого? У меня такая же проблема. Длительность не применяется.

3. У меня тоже возникла эта проблема. Переходы отлично работают при скрытии элементов, но не при их отображении.

Ответ №1:

У меня была очень похожая проблема с переходами, поэтому я хочу поделиться тем, как я ее исправил. Обратите внимание, что для этого может потребоваться Tailwind v3 (v2 в CodePen у меня не работал).

Во-первых, в коде OP я просто вижу скрытие / отображение основного Div. Нам также понадобится некоторый JS-код, чтобы добавить соответствующий CSS-класс (классы) для переходов по соответствующим элементам. ОДНАКО: применение CSS-переходов сразу после отображения элемента (т. Е. Удаление «display: none») не работает! Смотрите официальную заметку от Mozilla здесь. Я надолго застрял, пытаясь разобраться в этой единственной проблеме.

Я исправил свою проблему, используя рекомендацию Mozilla о применении setTimeout() за несколько миллисекунд до применения свойств CSS. В случае с операцией должно сработать что-то подобное (НЕПРОВЕРЕННОЕ).:

 const panelContainer = document.querySelector('#panel-container');
document.querySelector('#panel-settings--open').addEventListener('click', function(event) {
  event.preventDefault();

  panelContainer.classList.remove('hidden');
  setTimeout(function(){
    document.getElementById('panel-overlay').classList.add("ease-in-out", "duration-500", "opacity-100");
  }, 10);
});

Приведенное выше предназначено для отображения перехода и предполагает, что элемент panel-overlay еще не имеет CSS-классов, связанных с переходом (или, по крайней мере, не для непрозрачности).

Скрыть переход и заставить переходы работать правильно немного сложнее. Вам нужно будет применить соответствующие классы (например, непрозрачность-0) и дать завершиться переходу, прежде чем применять скрытый класс к основному Div. Для этого я добавил прослушиватель событий для события «transitionend» и применил hidden после его запуска.