Репликация $.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, активность репозитория,
и другие точки данных определили, что его обслуживание
Неактивный.