Как правильно переписать этот toggle из jQuery в чистый JS?

Question

[kunjut19]

Написал навигацию с помощью tailwindcss. Но резкое раскрытие меню на маленьких экранах мне не нравится - хочу, чтобы меню плавно выплывало. Нашел готовое решение, которое мне подходит. Но оно с использованием jQuery, который я не хочу использовать. А переписать на чистый JS своими силами не получается (а именно я не понимаю, каким образом height: "toggle" влияет на <div class="hidden">). Поэтому прошу у вас помощи! Как должен выглядеть этот jQuery скрипт на чистом JS?

<nav class="flex items-center bg-gray-800 p-3 flex-wrap">
  <a href="#" class="p-2 mr-4 inline-flex items-center">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="fill-current text-white h-8 w-8 mr-2">
      <path
        d="M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z" />
    </svg>
    <span class="text-xl text-white font-bold uppercase tracking-wide">Talwind CSS</span>
  </a>
  <button class="text-white inline-flex p-3 hover:bg-gray-900 rounded lg:hidden ml-auto hover:text-white outline-none nav-toggler" data-target="#navigation">
    <i class="material-icons">menu</i>
  </button>
  <div class="hidden top-navbar w-full lg:inline-flex lg:flex-grow lg:w-auto" id="navigation">
    <div class="lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start  flex flex-col lg:h-auto">
      <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white">
        <span>Home</span>
      </a>
      <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white">
        <span>About</span>
      </a>
      <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white">
        <span>Services</span>
      </a>
      <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white">
        <span>Gallery</span>
      </a>
      <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white">
        <span>Products</span>
      </a>
      <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white">
        <span>Contact Us</span>
      </a>
    </div>
  </div>
</nav>


<script>
  $(document).ready(function() {
    $(".nav-toggler").each(function(_, navToggler) {
      var target = $(navToggler).data("target");
      $(navToggler).on("click", function() {
        $(target).animate({
          height: "toggle"
        });
      });
    });
  });
</script>

P.S. код взят отсюда

Comments

[Ankhena]

Вы уже задавали этот вопрос.
И даже самостоятельно находили ответ.

Делается это с помощью classList.toggle
А в самом классе пишете что угодно.

Какие у вас проблемы с CSS мы так и не поняли из предыдущей версии вопроса.

[kunjut19]

Ankhena, но... в Tailwind класс .hidden соответствует display: none;. Если через classList.toggle добавлять и удалять класс hidden у меню, то изменения будут происходить мгновенно, разве нет? Тут либо элемент спрятан, либо отображается.
Но в примере, где используется jQuery, меню появляется не мгновенно - оно как бы выплывает. Я добавлял в стили меню transition: all 1.5s ease-in-out;. Но оно все так же появляется и исчезает моментально. Следовательно, $(target).animate({ height: "toggle" }); работает как-то по-другому, но я не пойму, как именно... и почему height?

[Ankhena]

kunjut19,
Да, display не анимируется. Попробуйте представить элемент, который уже немножко block, но еще всё таки flex.

Полно вариантов скрытия блока без display, свойствами, которые анимируются. Например, прозрачностью или высотой/шириной или сдвигом трансформом. Их и используйте.

[kunjut19]

Ankhena, окей, попробую. Но мне интересно вот что. В примере явно прописано <div class="hidden "> для меню, которое заплывает-выплывает. Хотелось бы понять, каким все-таки образом тогда работает $(target).animate({ height: "toggle" }); и заставляет меню медленно появляться, если displayне анимируется?

[Ankhena]

kunjut19, делают несколько манипуляций, сначала меняют display, потом постепенно меняют высоту с 0 до нужной (вычислив ее предварительно).
Погуглите "jquery animate height", то что я описала, это не единственный вариант.

[Programiker]

Ankhena, ссылку на тот вопрос дайте - посмотрю, мож чё-нибуть толкового себе найду

[Ankhena]

Programiker, у автора этого вопроса попросите, я не помню естественно, а свой предыдущий, в котором была ссылка, он удалил.

[Programiker]

kunjut19 нусс....

[kunjut19]

Максим Зайцев, не всегда приемлемо - это как?

[kunjut19]

Programiker, не помню, чтобы задавал похожий вопрос. А если и задавал, то не помню, о чем именно

[kunjut19]

гляньте, пожалуйста, в комментарии к ответу Михаила!

Answer 1

[Михаил Макаров]

В jQuery в функции animate значение 'toggle' для height — это всего лишь предопределённая в jQuery строка, как, например, 'show' и 'hide'. Когда функция animate получает такую, известную ей, строку вместо числового значения, она начинает вести себя по заданному алгоритму. В случае с 'toggle' этот алгоритм будет по таймеру уменьшать с некоторым шагом значение height от 100% до нуля, а потом увеличивать обратно от нуля до 100%. Соотственно, чтобы реализовать аналогичное поведение без jQuery, нужно запустить функцию setTimeout и в ней манипулировать значением height в нужном элементе. Ну и с интервалом, и шагом изменения поэкспериментировать прийдётся.

Comments

[kunjut19]

я реализовал это так:

document.addEventListener("DOMContentLoaded", () => {
  const $navTogglers = Array.prototype.slice.call(
    document.querySelectorAll(".nav-toggler"),
    0
  );

  if ($navTogglers.length > 0) {
    $navTogglers.forEach((el) => {
      const target = el.dataset.target;
      const menu = document.getElementById(target);

      let originalHeight = menu.offsetHeight;
      let height = 0;

      menu.style.height = height;

      el.addEventListener("click", () => {
        if (height) {
          function frame() {
            height -= 4;
            menu.style.height = height + "px";
            if (height <= 0) {
              clearInterval(id);
            }
          }
          var id = setInterval(frame, 2);
        } else {
          function frame() {
            height += 4;
            menu.style.height = height + "px";
            if (height >= originalHeight) {
              clearInterval(id);
            }
          }
          var id = setInterval(frame, 2);
        }
      });
    });
  }
});

но мне очень не нравится. 1) чтобы расчитать реальную высоту меню в раскрытом виде приходится сначала записывать эту высоту в отдельную переменную, а потом приравнивать 0, чтобы скрыть. Можно ли как-нибудь по-другому расчитать, какой должна быть высота меню в раскрытом виде? Элегантнее?
2) еще одна проблема заключается в том, что если открыть страницу сначала в режиме десктопа, то реальная высота меню в раскрытом виде будет 0 (потому что на десктопе оно никуда не складывается и не раскрывается), поэтому при переходе в мобильный режим меню не работает - оно уже посчитало высоту в раскрытом виде как 0. Приходится перезагружать страницу. Что бы посоветовали с этим делать?
3) как я понял, длительность animate - это длительность всего действия, которое "анимируется". В моем же случае приходится задавать длительность для каждого отдельного "поддействия" - прибавление/уменьшение высоты - чтобы расчитать длительность всего раскрытия/закрытия. Можно ли задать длительность для всего действия, чтобы длительность каждого шага раздробилась автоматически?

[Ankhena]

kunjut19,

2)

Вешать перерасчет также и на ресайз.