ui/ Transition
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
type
is 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
type
is 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