Bug Tracker Active
Motion
Animace a pohyb interakcí pro lepší uživatelský zážitek.
Používáme animace a pohyb abychom podpořili srozumitelnost interakcí a zlepšili uživatelský zážitek. Pravidla a standardy nám pomáhají udržovat design tokeny které definují délku a typ animace.
Délka animace
Délka trvání animace je specifikována pomocí design tokenu reprezentujícího dobu v milisekundách.
| Název variable | Hodnota ms |
|---|---|
duration/100 | 100 |
duration/200 | 200 |
duration/250 | 250 |
duration/300 | 300 |
duration/400 | 400 |
duration/500 | 500 |
duration/600 | 600 |
Typ animace
Ease-in-out
Ease-in-out je animační křivka, která kombinuje pomalý začátek i konec pohybu – animace tedy nejprve zrychluje a poté zase zpomaluje, což vytváří plynulý a přirozený dojem pohybu.
| Název variable | funkce |
|---|---|
animation.timingFunction.base | ease-in-out |
Fade-in-out
Postupné zvyšování průhlednosti z 0 % na 100 % a snižování ze 100% na 0%. Využívá se pro jemné zobrazení a nebo odstranění elementů.
Animace komponent
Tabulkový přehled vlastností animations a transitions pro jednotlivé komponenty Design systemu.
| Komponenta | animation: duration, [names], timing-function, delay | transition: duration, [properties], timing-function |
|---|---|---|
| ActionBar | - | - |
| BreadCrumbs | - | - |
| Button | - | 250ms, [background-color, color, border-color], ease-in-out |
| ButtonGroup | - | - |
| Chip | - | closeButton: 250ms opacity ease-in-out |
| 250ms, outline, ease-in-out | ||
| CloseButton | - | 250ms, color, ease-in-out |
| Container | - | - |
| ContentMessage | - | - |
| Divider | - | - |
| Dropdown | PrimeReact: popover fadeIn , fadeOut | - |
| Dock | - | button: 250ms, [background-color, color, border-color, inline-size, block-size], ease-in-out, |
| icon: 250ms, [fill, inline-size, block-size], ease-in-out | ||
| ErrorPage | - | - |
| FileUpload | loading, animace, závisí na délce uploadu | |
| Flag | - | - |
| HorizontalList | - | 250ms, background-color, ease-in-out |
| Icon | - | - |
| InnerAction | - | 250ms, [background-color, color], ease-in-out |
| Label | - | - |
| Layout | - | - |
| Link | - | 250ms, color, ease-in-out |
| Literal | - | - |
| Menu | - | 250ms, [spousta veci], ease-in-out |
| MessageBox | PrimeReact: popover fadeIn , fadeOut | - |
| Modal | PrimeReact: popover fadeIn , fadeOut | - |
| NotificationBadge | - | - |
| Pagination | - | - |
| Panel | - | - |
| AccordionPanel | - | 250ms, [height, padding-block-start, padding-block-end], ease-in-out |
| Head: 250ms, [background-color, color], ease-in-out | ||
| PanelMenu | - | 250ms, [background-color, color], ease-in-out |
| Popover | PrimeReact: popover fadeIn , fadeOut | - |
| QuickActions | - | 250ms, [display, opacity], ease-in-out |
| SideBar | 250ms, showContent, linear, 250ms | 250ms, [inline-size, margin-inline-start, padding-inline-start, padding-inline-end], ease-in-out |
| SideSheet | PrimeReact: popover fadeIn , fadeOut | - |
| Skeleton | 1500ms, skeletonLoading, linear | - |
| Spinner | 600ms, spinerLoading, linear | - |
| Steps | - | circle: 250ms, [background-color, color, border-color], ease-in-out |
| SystemButton | - | 250ms, [background-color, color, border-color], ease-in-out |
| Table | - | 250ms, [background-color, color], ease-in-out |
| Tabs | - | 250ms, [background-color, color, border-color, text-shadow, box-shadow], ease-in-out |
| Tag | - | - |
| Tile | - | 250ms, [background-color, color, border-color, box-shadow (outline)], ease-in-out |
| Toast | PrimeReact: popover fadeIn , fadeOut | - |
| ToggleButtoon | 250ms, [background-color, color, border-color], ease-in-out | |
| Tooltip | - | - |
| TreeTable | - | - |
| Map | - | - |
| AutoComplete | PrimeReact: popover fadeIn , fadeOut | 250ms, border-color, ease-in-out |
| CheckBox | - | 250ms, border-color, ease-in-out |
| CheckBoxSet | - | 250ms, border-color, ease-in-out |
| DatePicker | PrimeReact: popover fadeIn , fadeOut | 250ms, border-color, ease-in-out |
| Fieldset | - | - |
| Input | - | 250ms, border-color, ease-in-out |
| InputWrapper | - | - |
| InputDescription | - | - |
| InputGroup | - | - |
| Option | - | circle: 250ms, [background-color, color], ease-in-out |
| Label | - | - |
| FormGroup | - | - |
| MaskedInput | - | 250ms, border-color, ease-in-out |
| MultiSelect | PrimeReact: popover fadeIn , fadeOut | 250ms, border-color, ease-in-out |
| NumberInput | - | 250ms, border-color, ease-in-out |
| RadioSet | - | 250ms, border-color, ease-in-out |
| Search | - | 250ms, border-color, ease-in-out |
| Select | PrimeReact: popover fadeIn , fadeOut | 250ms, border-color, ease-in-out |
| Sorting | - | 250ms, [background-color, color, border-color], ease-in-out |
| Switch | - | 250ms, background-color, ease-in-out |
| circle: 250ms, translate, ease-in-out | ||
| TextArea | - | 250ms, border-color, ease-in-out |
Composites
| Komponenta | animation | transition: duration, [properties], timing-function |
|---|---|---|
| SearchResult | - | - |
| SectionHeader | - | bottomPart: 250ms,[grid-template-rows, row-gap], ease-in-out |
| collapseButton: 250ms, rotate, ease-in-out | ||
| StickyHeader | - | 250ms, translate, ease-in-out |
| Footer | - | - |
| Filter | - | 250ms, [grid-template-rows, height, row-gap], ease-in-out |
| Map | - | - |