Компонент Плавные переходы Transition

Создавайте плавные переходы между двумя состояниями при наведении на элемент. 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>
  • Fade

    Fade

    Bottom

    Bottom

    Иконка

    2 Изображения

    Изображение масштабируется (Scale Up)

    Заголовок

    Подзаголовок

    Текст (Small Top + Small Bottom)

  • <div class="uk-child-width-1-2 uk-grid-match uk-grid-small" uk-grid>
        <div class="uk-text-center">
            <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img src="/demo/img/dark.jpg" alt="">
                <div class="uk-transition-fade uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">
                    <p class="uk-h4 uk-margin-remove">Fade</p>
                </div>
            </div>
            <p class="uk-margin-small-top">Fade</p>
        </div>
        <div class="uk-text-center">
            <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img src="/demo/img/dark.jpg" alt="">
                <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default">
                    <p class="uk-h4 uk-margin-remove">Bottom</p>
                </div>
            </div>
            <p class="uk-margin-small-top">Bottom</p>
        </div>
        <div class="uk-text-center">
            <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                <img src="/demo/img/dark.jpg" alt="">
                <div class="uk-position-center">
                    <span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
                </div>
            </div>
            <p class="uk-margin-small-top">Иконка</p>
        </div>
        <div class="uk-text-center">
            <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img src="/demo/img/dark.jpg" alt="">
                <img class="uk-transition-scale-up uk-position-cover" src="/demo/img/light.jpg" alt="">
            </div>
            <p class="uk-margin-small-top">2 Изображения</p>
        </div>
        <div class="uk-text-center">
            <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img class="uk-transition-scale-up uk-transition-opaque" src="/demo/img/dark.jpg" alt="">
            </div>
            <p class="uk-margin-small-top">Изображение масштабируется (Scale Up)</p>
        </div>
        <div class="uk-text-center">
            <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
                <img src="/demo/img/dark.jpg" alt="">
                <div class="uk-position-center">
                    <div class="uk-transition-slide-top-small"><h4 class="uk-margin-remove">Заголовок</h4></div>
                    <div class="uk-transition-slide-bottom-small"><h4 class="uk-margin-remove">Подзаголовок</h4></div>
                </div>
            </div>
            <p class="uk-margin-small-top">Текст (Small Top + Small Bottom)</p>
        </div>
    </div>