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

Transition`Component`

A stateful component that allows for applying transitions to its child items via configurable properties and events.

import Transition from '@enact/ui/Transition';

Properties

children: The node to be transitioned.
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: 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'
noAnimation: Disables transition animation.
When false, visibility changes animate.
Default: false
onHide: Called after transition for hiding is finished.
onShow: Called after transition for showing is finished.
timingFunction: The transition timing function. Supported function names are: ease, ease-in, ease-out, ease-in-out, ease-in-quart, ease-out-quart, and linear.
Default: 'ease-in-out'
type: 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'
visible: The visibility of the component, which determines whether it's on the screen or off.
Default: true

TransitionBase`Component`

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

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
children: The node to be transitioned.
clipHeight: The height of the transition when type is set to 'clip', used when direction is 'left' or 'right'.
Default: null
clipWidth: The width of the transition when type is set to 'clip', used when direction is 'left' or 'right'.
Default: null
css: Customizes 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 class
inner - The element inside the transition. This is the container for the transitioning content.
shown - Applied when content is present (visible), related to the visible prop/state
hidden - Applied when content is not present (hiding), related to the visible prop/state
slide - Applied when the slide type is set
fade - Applied when the fade type is set
clip - Applied when the clip type is set
up - Applied when the direction up is set
right - Applied when the direction right is set
down - Applied when the direction down is set
left - Applied when the direction left is set
short - Applied when the duration short is set
medium - Applied when the duration medium is set
long - Applied when the duration long is set
ease - Applied when the timingFunction ease is set
ease-in - Applied when the timingFunction ease-in is set
ease-out - Applied when the timingFunction ease-out is set
ease-in-out - Applied when the timingFunction ease-in-out is set
ease-in-quart - Applied when the timingFunction ease-in-quart is set
ease-out-quart - Applied when the timingFunction ease-out-quart is set
linear - Applied when the timingFunction linear is set
direction: Sets the direction of transition. Where the component will move to; the destination. Supported directions are: 'up', 'right', 'down', 'left'.
Default: 'up'
duration: 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'
noAnimation: Disables transition animation.
When false, visibility changes animate.
Default: false
timingFunction: The transition timing function.
Supported function names are: ease, ease-in, ease-out, ease-in-out, ease-in-quart, ease-out-quart, and linear.
Default: 'ease-in-out'
type: 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'
visible: Sets the visibility of the component, which determines whether it's on screen or off.
Default: true

Variable Types Key:ArrayBooleanFunctionModuleNumberObjectString

ui/Transition

Members

TransitionComponent

Properties

TransitionBaseComponent

Properties

Transition`Component`

TransitionBase`Component`