Hotwire + Tailwind: Затухание без Javascript

В этой статье мы расскажем о том, как затухать в загруженном турбо-фрейме без дополнительного Javascript.

Отказ от ответственности — установка включает конфигурацию Tailwind, которая технически является Javascript.


Идея и настройка

Иногда просто загрузка контента в турбо-фрейм кажется довольно рывковой. Добавление простого затухания может сотворить чудо и сделать приложение более плавным и быстрым.

Обычный подход к этому — добавление анимации Javascript. К счастью, такой же эффект можно создать с помощью CSS. 🥳


Добавление CSS-анимации в Tailwind

Настройка Tailwind довольно проста. Вся идея заключается в добавлении CSS-анимации, которая изменяет непрозрачность элемента от 0% до 100%.

// tailwind.config.js

module.exports = {
  // ...
  theme: {
    extend: {
      animation: {
        "fade-in": "fadeIn 0.15s ease-in-out"
      },
      keyframes: () => ({
        fadeIn: {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 }
        }
      })
    }
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь эта анимация будет доступна при добавлении класса animate-fade-in к элементу. 💆


Использование затухания на турбофрейме

Применение fade-in — это буквальное добавление класса animate-fade-in к турбо-фрейму (или содержимому внутри него).

<turbo-frame id="loadable" class="animate-fade-in">
  <h3 class="uppercase font-semibold">Fading in</h3>
</turbo-frame>
Вход в полноэкранный режим Выйдите из полноэкранного режима

Вуаля!


Завершение

Очевидно, что такой fade-in может быть использован вне контекста Hotwire или Tailwind. Тем не менее, этот вариант показался нам отличным примером использования, который позволяет улучшить UX и имеет минимальные накладные расходы.


Если у вас есть вопросы или предложения, обращайтесь ко мне в Twitter или заходите на мой сайт!

Оцените статью
Procodings.ru
Добавить комментарий