Presence

Появление и уход: элемент живёт, пока проигрывается выход. Pro · 3D и моушн › Моушн для любых компонентов

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add presence

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { Presence } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`present` *	`boolean`		Whether the content is there. Turning it off plays the exit first, then unmounts the content.
`preset`	`'fade' \| 'up' \| 'down' \| 'start' \| 'end' \| 'scale' \| 'pop' \| 'flip'`	`'fade'`	How the content enters and leaves.
`appear`	`boolean`	`false`	Also play the entrance when the content is there from the first render.
`duration`	`number`		Length of the entrance, ms. Default: the theme's `--ui-motion-enter`.
`exitDuration`	`number`		Length of the exit, ms. Default: the theme's `--ui-motion-exit`.
`spring`	`SpringName`		The spring of the entrance. Default: the theme's `--ui-motion-spring`.
`onExitComplete`	`() => void`		Called after the exit, once the content is gone.
`asChild`	`boolean`	`false`	Animates the only child (an Alert, a Card, a panel) instead of wrapping it in a div.

Похожие компоненты

Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
Helix Rail — Карточки на спирали, которая вращается от прокрутки
Scroll Scene — Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса
Parallax Layers — Слои глубины, которые сдвигаются от прокрутки и курсора
Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура

Назад: Layout Group · Далее: Scene Backdrop · Весь раздел «3D и моушн»