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

Создавайте плавные переходы между двумя состояниями при наведении на элемент.

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>
Документация
Компоненты