Блог

Главная - Вопросы по программированию - Безголовый пользовательский интерфейс «оставить» переход не работает в React

Безголовый пользовательский интерфейс «оставить» переход не работает в React

#reactjs #animation #transition #tailwind-css #headless

Вопрос:

Моя навигационная панель настроена таким образом, что при изменении состояния меню гамбургеров открывается и закрывается. В то время enter как анимация работает идеально, leave это не так. Моя анимация представляет собой плавное скольжение внутрь и выскользнуть, но работает только слайд, в то время как в отпуске он просто закрывается нормально.

 const NavbarMenu = ({ isOpen, menuClick }) => {
  return (
    <Transition appear={true} show={isOpen}>
      <Transition.Child
        class="flex flex-col bg-yellow-700 fixed top-0 right-0 p-5 z-20 w-1/2 h-full transition ease-in-out duration-300"
        enter="transition-opacity ease-in-out duration-700"
        enterFrom="translate-x-full"
        enterTo="translate-x-0"
        leave="transition-opacity ease-out duration-700"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        <Exit className="text-yellow-100 w-1/6" onClick={() => menuClick()} />
        <div className="flex flex-col gap-y-4 mt-10 font-poppins font-bold text-xl text-yellow-100">
          <span>About</span>
          <span>About</span>
          <span>About</span>
        </div>
      </Transition.Child>
    </Transition>
  );
};

Ответ №1:

В вашем переходе на отпуск отсутствуют классы translate-x.

Вероятно, вы также хотите добавить переход непрозрачности в анимацию ввода.

Это должно сработать:

 const NavbarMenu = ({ isOpen, menuClick }) => {
  return (
    <Transition appear={true} show={isOpen}>
      <Transition.Child
        class="flex flex-col bg-yellow-700 fixed top-0 right-0 p-5 z-20 w-1/2 h-full transition duration-700"
        enter="ease-in-out"
        enterFrom="translate-x-full opacity-0"
        enterTo="translate-x-0 opacity-100"
        leave="ease-out"
        leaveFrom="translate-x-0 opacity-100"
        leaveTo="translate-x-full opacity-0"
      >
        <Exit className="text-yellow-100 w-1/6" onClick={() => menuClick()} />
        <div className="flex flex-col gap-y-4 mt-10 font-poppins font-bold text-xl text-yellow-100">
          <span>About</span>
          <span>About</span>
          <span>About</span>
        </div>
      </Transition.Child>
    </Transition>
  );
};

Ответ №2:

Чаще всего, когда «оставить переходы» не работает, это происходит потому, что он отключается до окончания перехода. Чтобы обойти это, вам нужно «промежуточное состояние», которое запускается, когда переход находится в режиме показа. Затем создайте эффект использования, который прослушивает это состояние, и установите параметр setTimeout, который выполняет фактическое отключение элемента.

Метки: