Exports the ui/Transition.Transition and ui/Transition.TransitionBase components. The default export is ui/Transition.Transition.
import Transition from '@enact/ui/Transition';Members
TransitionClass
ui/Transition.Transition is a stateful component that allows for applying transitions to its child items via configurable properties and events.
import Transition from '@enact/ui/Transition';Properties
- clipHeight ✘
The height of the transition when
typeis set to'clip'.This is deprecated.
Default: null- direction
The direction of transition (i.e. where the component will move to; the destination). Supported directions are:
'up','right','down','left'.Default: 'up'- duration
The duration of the transition. Supported durations are:
'short'(250ms),'long'(1s) and'medium'(500ms).Default: 'medium'- onHide
A function to run after transition for hiding is finished.
- onShow
A function to run after transition for showing is finished.
- timingFunction
Customize 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'- type
How the transition affects the content. Supported types are:
'slide','clip', and'fade'.Default: 'slide'- visible
The visibility of the component, which determines whether it's on screen or off.
Default: true
TransitionBaseClass
ui/Transition.TransitionBase is a stateless component that allows for applying transitions to its child items via configurable properties and events. In general, you want to use the stateful version, ui/Transition.Transition.
import {TransitionBase} from '@enact/ui/Transition';Properties
- childRef
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: null- clipHeight
Specifies the height of the transition when
typeis set to'clip'.Default: null- direction
Sets the direction of transition. Where the component will move to; the destination. Supported directions are:
'up','right','down','left'.Default: 'up'- duration
Control how long the transition should take. Supported durations are:
'short'(250ms),'long'(1s).'medium'(500ms) is default when no others are specified.Default: 'medium'- noAnimation
When
true, transition animation is disabled. Whenfalse, visibility changes animate.Default: false- timingFunction
Customize 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'- type
Choose how you'd like the transition to affect the content. Supported types are: slide, clip, and fade.
Default: 'slide'- visible
Set the visibility of the component, which determines whether it's on screen or off.
Default: true