ui/ Transition
A component that can transition its children components onto the screen.
Transitions whether that's from off the edge of the screen or hidden inside or behind an
already-on-screen component. You can switch types of transitions using the type
property,
change the direction they come in from using the direction
property, or even adjust the
transition timing function using timingFunction
.
import Transition from '@enact/ui/Transition';
Members
TransitionComponent
A stateful component that allows for applying transitions to its child items via configurable properties and events.
import Transition from '@enact/ui/Transition';
Properties
The node to be transitioned.
The direction of transition (i.e. where the component will move to; the destination).
Supported directions are:
'up'
,'right'
,'down'
,'left'
.
Default: 'up'Controls how long the transition should take.
Supported preset durations are:
'short'
(250ms),'medium'
(500ms), and'long'
(1s).'medium'
(500ms) is default when no others are specified.
Any valid CSS duration value is also accepted, e.g. "200ms" or "3s". Pure numeric values are also supported and treated as miliseconds.
Default: 'medium'Disables transition animation.
When
false
, visibility changes animate.Default: falseCalled after transition for hiding is finished.
Called after transition for showing is finished.
The transition timing function. Supported function names are:
ease
,ease-in
,ease-out
,ease-in-out
,ease-in-quart
,ease-out-quart
, andlinear
.Default: 'ease-in-out'The type of transition to affect the content.
Supported types are:
'slide'
,'clip'
, and'fade'
.
Details on types:
'slide'
- Typically used for bringing something which is off the edge of the screen, and not visible, onto the screen. Think of a popup, toast, notification, dialog, or an overlaying menu. This requires no re-rendering or repainting of the screen during the transition, making it very performant. However, this does not affect layout at all, which makes it less useful for transitioning from a place already on the screen.'clip'
- This is useful for showing a component that transitions-in from a location that is already on the screen. Examples would be an expanding header or an accordion. This type does affects layout, its current size will push other sibling elements to make room for itself. Because of this, repainting the layout does happen during transition.'fade'
- Fade the components onto the screen, from 0 opacity (completely invisible) to 1 (full visibility). Pretty basic, but useful for fading on/off a tooltip, a menu, a panel, or even view contents. This does not affect layout at all.
Default: 'slide'The visibility of the component, which determines whether it's on the screen or off.
Default: true
TransitionBaseComponent
The stateless structure of the component.
In case you want to provide all of the state yourself.
In general, you'll probably want to use the Transition
instead of TransitionBase
.
import {TransitionBase} from '@enact/ui/Transition';
Properties
Provide a function to get the reference to the child node (the one with the content) at render time.
Useful if you need to measure or interact with the node directly.
Default: nullThe node to be transitioned.
The height of the transition when
type
is set to'clip'
, used when direction is 'left' or 'right'.Default: nullThe width of the transition when
type
is set to'clip'
, used when direction is 'left' or 'right'.Default: nullCustomizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.
The following classes are supported:
transition
- The root component classinner
- The element inside the transition. This is the container for the transitioning content.shown
- Applied when content is present (visible), related to thevisible
prop/statehidden
- Applied when content is not present (hiding), related to thevisible
prop/stateslide
- Applied when theslide
type
is setfade
- Applied when thefade
type
is setclip
- Applied when theclip
type
is setup
- Applied when thedirection
up
is setright
- Applied when thedirection
right
is setdown
- Applied when thedirection
down
is setleft
- Applied when thedirection
left
is setshort
- Applied when theduration
short
is setmedium
- Applied when theduration
medium
is setlong
- Applied when theduration
long
is setease
- Applied when thetimingFunction
ease
is setease-in
- Applied when thetimingFunction
ease-in
is setease-out
- Applied when thetimingFunction
ease-out
is setease-in-out
- Applied when thetimingFunction
ease-in-out
is setease-in-quart
- Applied when thetimingFunction
ease-in-quart
is setease-out-quart
- Applied when thetimingFunction
ease-out-quart
is setlinear
- Applied when thetimingFunction
linear
is set
Sets the direction of transition. Where the component will move to; the destination. Supported directions are:
'up'
,'right'
,'down'
,'left'
.Default: 'up'Controls how long the transition should take. Supported preset durations are:
'short'
(250ms),'medium'
(500ms), and'long'
(1s).'medium'
(500ms) is default when no others are specified. Any valid CSS duration value is also accepted, e.g. "200ms" or "3s". Pure numeric values are also supported and treated as milliseconds.Default: 'medium'Disables transition animation.
When
false
, visibility changes animate.Default: falseThe transition timing function.
Supported function names are:
ease
,ease-in
,ease-out
,ease-in-out
,ease-in-quart
,ease-out-quart
, andlinear
.
Default: 'ease-in-out'The type of transition to affect the content.
Supported types are:
'slide'
,'clip'
, and'fade'
.
Details on types:
'slide'
- Typically used for bringing something which is off the edge of the screen, and not visible, onto the screen. Think of a popup, toast, notification, dialog, or an overlaying menu. This requires no re-rendering or repainting of the screen during the transition, making it very performant. However, this does not affect layout at all, which makes it less useful for transitioning from a place already on the screen.'clip'
- This is useful for showing a component that transitions-in from a location that is already on the screen. Examples would be an expanding header or an accordion. This type does affects layout, its current size will push other sibling elements to make room for itself. Because of this, repainting the layout does happen during transition.'fade'
- Fade the components onto the screen, from 0 opacity (completely invisible) to 1 (full visibility). Pretty basic, but useful for fading on/off a tooltip, a menu, a panel, or even view contents. This does not affect layout at all.
Default: 'slide'Sets the visibility of the component, which determines whether it's on screen or off.
Default: true