enact logoEnact
Edit on GitHub

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
children
Node

The node to be transitioned.

direction
String

The direction of transition (i.e. where the component will move to; the destination).

  • Supported directions are: 'up', 'right', 'down', 'left'.

Default: 'up'
duration
StringNumber

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
Boolean

Disables transition animation.

When false, visibility changes animate.

Default: false
onHide
Function

Called after transition for hiding is finished.

onShow
Function

Called after transition for showing is finished.

timingFunction
String

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
String

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
Boolean

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
childRef
ObjectFunction

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
Node

The node to be transitioned.

clipHeight
Number

The height of the transition when type is set to 'clip', used when direction is 'left' or 'right'.

Default: null
clipWidth
Number

The width of the transition when type is set to 'clip', used when direction is 'left' or 'right'.

Default: null
css
Object

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
String

Sets the direction of transition. Where the component will move to; the destination. Supported directions are: 'up', 'right', 'down', 'left'.

Default: 'up'
duration
StringNumber

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
Boolean

Disables transition animation.

When false, visibility changes animate.

Default: false
timingFunction
String

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
String

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
Boolean

Sets the visibility of the component, which determines whether it's on screen or off.

Default: true
ArrayBooleanFunctionModuleNumberObjectString