Jquery slide toggle: .slideToggle() | jQuery API Documentation

Репликация $.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 внутри

@click.prevent на

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *