Collapse
Компонент Collapse используется для скрытия и раскрытия контента с плавной анимацией высоты. Подходит для аккордеонов, выпадающих панелей, FAQ-разделов и других случаев, где требуется сворачиваемый контент.
Обзор
- Основное назначение: анимированное скрытие и отображение контента.
- Ключевые возможности:
- Плавная анимация раскрытия и скрытия.
- Автоматический расчёт длительности анимации на основе высоты контента.
- Возможность задать фиксированную длительность.
- Настройка минимальной высоты в скрытом состоянии.
- Настройка функции плавности перехода.
- Возможность заменить корневой компонент.
- Событие
transitionEndпо завершении анимации. - Доступность (
aria-hidden).
API компонента
Props
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
opened | Boolean | false | Состояние компонента: true — раскрыт, false — скрыт. |
transitionDuration | Number | Длительность анимации в миллисекундах. Если не указана, рассчитывается автоматически на основе высоты контента (не более 500 мс). Значение 0 отключает анимацию. | |
transitionTimingFunction | String | 'cubic-bezier(0.4, 0.0, 0.2, 1)' | CSS-функция плавности для анимации. |
min | String | '0px' | Минимальная высота компонента в скрытом состоянии. При '0px' добавляется display: none. |
component | String | Object | Box | Корневой компонент или HTML-тег. |
componentProps | Object | {} | Дополнительные пропсы, передаваемые корневому компоненту. |
События
| Событие | Описание |
|---|---|
transitionEnd | Вызывается при завершении анимации раскрытия или скрытия. |
Слоты
| Имя слота | Описание |
|---|---|
default | Сворачиваемый контент. |
Особенности работы
- Автоматическая длительность: если
transitionDurationне задан, длительность рассчитывается по формуле, учитывающей высоту контента. Это обеспечивает естественную скорость анимации независимо от объёма содержимого. - Двойной requestAnimationFrame: используется для корректного запуска CSS-переходов — сначала применяются начальные стили, затем конечные.
- Обработка
transitionend: после завершения анимации раскрытия убираются инлайн-стили, позволяя контенту свободно менять высоту. После скрытия применяются финальные стили.