Компонент Плавные переходы Transition
Создавайте плавные переходы между двумя состояниями при наведении на элемент. UIkit 3 и Transition. Руководство по использованию.
Переходное состояние
Руководство по использованию Transition
Чтобы переключить переход при наведении или фокусе, добавьте класс .uk-transition-toggle
в родительский элемент. Также добавьте tabindex="0"
чтобы сделать анимацию фокусируемой с помощью клавиатуры и сенсорных устройств. Добавьте один из классов .uk-transition-*
к любому дочернему элементу, чтобы применить фактический эффект.
Класс | Описание |
---|---|
.uk-transition-fade |
Позволяет элементу плавно появляться и исчезать. |
.uk-transition-scale-up .uk-transition-scale-down |
Элемент масштабируясь увеличивается или уменьшается. |
.uk-transition-slide-top .uk-transition-slide-bottom .uk-transition-slide-left .uk-transition-slide-right |
Позволяет элементу скользить сверху, снизу, слева, справа. |
.uk-transition-slide-top-small .uk-transition-slide-bottom-small .uk-transition-slide-left-small .uk-transition-slide-right-small |
Элемент скользит сверху, снизу, слева или справа с маленького расстояния. |
.uk-transition-slide-top-medium .uk-transition-slide-bottom-medium .uk-transition-slide-left-medium .uk-transition-slide-right-medium |
Элемент скользит сверху, снизу, слева или справа на среднем расстоянии. |
Компонент Плавные переходы в основном используется в сочетании с компонентом Оверлей поскольку элементы переходят из невидимого в видимое состояние. Чтобы разместить наложение поверх другого элемента, например изображения, используйте компонент Позиции.
<div class="uk-transition-toggle" tabindex="0">
<div class="uk-transition-fade"></div>
</div>