Репликация $.slideToggle с помощью Tailwind CSS и Alpine.js
Я думаю, что величайшей особенностью jQuery являются все утилиты анимации/перехода. Эти методы действительно изменили скорость создания чистого и интерактивного пользовательского интерфейса с красивой анимацией.
Однако по мере того, как люди отходят от jQuery, трудно найти внятный ответ о том, как можно добиться эффекта, аналогичного slideToggle . Я собираюсь использовать Tailwind v1.2+ вместе с Alpine, используя некоторые современные правила трансформации CSS.
Основы
CSS предоставляет такие действительно полезные свойства преобразования, которые позволяют изменять внешний вид элемента. В этом случае мы хотим использовать функцию преобразования scaleY . Это позволит нам изменить высоту элемента, и Tailwind предоставляет для этого классы scale-y-0 и scale-y-100 .
Мы также хотим добавить несколько переходов для этого изменения масштаба, поэтому мы также будем использовать классы перехода - Tailwind.
Что касается Alpine, мы можем использовать некоторые атрибуты data- и обработчики событий для запуска слайда.
Щелчок
Первое, что нужно, это какой-то триггер. Я собираюсь использовать для этого .
Нам также нужна масштабная мишень. Вы можете жестко запрограммировать это, но я хочу сделать это повторно используемым и вместо этого буду использовать атрибут data-target . Мы можем использовать это, чтобы объявить селектор запроса нашего целевого элемента.
Было бы полезно, если бы эта цель на самом деле существовала на странице. Я сделаю его братом , но на самом деле вы можете разместить его где угодно на странице.
<дел>
Базовые стили
Наша цель также нуждается в некоторых классах для правильной работы. Эти классы будут применять некоторые разумные значения по умолчанию к элементу, так что нам нужно будет меньше работать с Alpine.
<дел
>
transition-transform обеспечит трансформацию нашего целевого элемента при любом изменении свойств
transform: ... . Класс easy-out определяет нашу временную функцию, в данном случае: transition-timing-function: easy-out .
Мы хотим скрыть любое переполнение внутри нашей цели, чтобы текст не высовывался за ее пределы при масштабировании.
origin-top гарантирует, что наше преобразование использует top элемента в качестве исходной/базовой точки.
Если вы измените это значение на origin-bottom , шкала будет идти от верха к низу элемента. Измените это в зависимости от того, какой эффект вы предпочитаете.
transform указывает Tailwind добавить основное правило transform , которое будет реагировать на изменения пользовательских свойств CSS, сделанные масштабом -y-* классов, о которых я упоминал ранее.
Заставить его двигаться
Теперь, когда у нас есть несколько базовых классов для целевого элемента, мы можем двигаться дальше и начать с самого переключателя. Я собираюсь написать весь этот JavaScript внутри , но вы можете переместить это в функцию.
Сначала нам нужно получить целевой элемент:
Затем нам нужно переключить класс scale-y-0 .
<кнопка data-target="#toggleTarget"
@click.prevent="document.querySelector($event.target.dataset.target).classList.toggle('масштаб-y-0')"
>Переключить
Если вы добавите фиктивный текст к целевому элементу, вы заметите, что он правильно переключает состояние, но плавной анимации нет. Это потому, что мы не добавили свойство transition-duration
Здесь есть несколько вариантов:
-
Добавить класс с продолжительностью по умолчанию. Например,
duration-500гарантирует, что преобразование займет 500 мс для завершения. -
Добавьте класс и поддержите атрибут
data-duration, чтобы изменить его на основе триггера.
Первый вариант не требует пояснений, но я также хотел бы показать вам, как использовать секционный подход.
data-duration support Добавьте атрибут data-duration к элементу триггера.
Я буду использовать 700 в качестве значения по умолчанию.
<кнопка data-target="#toggleTarget"
продолжительность данных = "700"
@click.prevent="document.querySelector($event.target.dataset.target)"
>Переключить
Теперь внутри вашего обработчика кликов нам нужно установить свойство для нашего целевого элемента, поэтому давайте также проведем небольшой рефакторинг:
Поскольку цель нужна нам более одного раза, мы можем присвоить ей константу. Затем, используя свойство стиля элемента, задайте свойство transitionDuration , используя новый атрибут data-duration .
Живой пример
Здесь я сделал более красивый пример, чтобы вы могли его проверить. Вы можете сделать еще один шаг вперед и создать переменную
window.$slideToggle , которая имеет это как функцию, чтобы вы могли использовать ее во всем своем приложении.
Вам также может понравиться...
реактивных переключателей-переключателей — пакет npm | Snyk
Все уязвимости безопасности принадлежат производственных зависимостей прямых и косвенных пакеты.
Риск безопасности и лицензии для важных версий
Все версии
| Версия | Уязвимости | Лицензионный риск | |||
|---|---|---|---|---|---|
0. | | | 10/2020 | Popular |
|
|
Ваш проект подвержен уязвимостям?
Сканируйте свои проекты на наличие уязвимостей.
Быстро исправить с помощью автоматизированного
исправления. Начните работу со Snyk бесплатно.
Начните бесплатно
Еженедельные загрузки (7)
- Звезды GitHub
- 0
- Вилки
- 0
- Авторы
- 2
Популярность прямого использования
Пакет npm react-slide-toggle-hooks получает всего 7 загрузок в неделю. Таким образом, мы забили Уровень популярности react-slide-toggle-hooks будет ограничен.
На основе статистики проекта из репозитория GitHub для
npm response-slide-toggle-hooks, мы обнаружили, что он
снялся? раз.
Частота фиксации
Нет последних коммитов
- Открытые проблемы
- 0
- Открытый PR
- 0
- Последняя версия
- 2 года назад
- Последняя фиксация
- 2 года назад
Дальнейший анализ состояния обслуживания реагирующих-слайд-переключателей на основе
каденция выпущенных версий npm, активность репозитория,
и другие точки данных определили, что его обслуживание
Неактивный.