Вспомогательные компоненты

<ya-kit-transition />

Вспомогательный компонент для управления анимацией появления дочерних элементов. Позволяет настраивать различные параметры анимации: длительность, задержка, функция сглаживания и другие.

Свойства элемента

Свойство

Тип

Описание

transition

string

Название анимации. Можно использовать собственное значение или одно из предзаданных:

zoom-in — плавное появление с увеличением масштаба;
fade-up — плавное появление со сдвигом вверх;
fade-down — плавное появление со сдвигом вниз.

duration

number

Длительность анимации в миллисекундах.

delay

number

Задержка перед началом анимации в миллисекундах.

stagger

number

Задержка между анимациями дочерних элементов в миллисекундах.
Используется для создания эффекта последовательного появления или исчезновения элементов.

is-visible

boolean

Определяет, должны ли дочерние элементы быть видимыми. По умолчанию — false.

easing

linear, ease, ease-in, ease-out

Функция сглаживания анимации, которая определяет скорость изменения стилей во времени.
Пример использования
<ya-kit-intersection-controller as="controller" trigger-once="1">
    <div ref={{controller.elementRef}}>
        <ya-kit-h-stack gap="100" class="items">
            <ya-kit-transition stagger="50" is-visible={{controller.isIntersecting}} transition="custom">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </ya-kit-transition>
        </ya-kit-h-stack>
    </div>
</ya-kit-intersection-controller>

.item[data-transition='custom'] {
    transform: rotate(90deg);
    opacity: 0;
}

.item[data-transition='custom'][data-transition-status='entered'] {
    transform: rotate(0deg);
    opacity: 1;
}
Пример внешнего вида

Предыдущая
Состояния и уведомления
Следующая
Контроллеры