Skip to content
Enact

ui/Transition

Edit on GitHub

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.

Loading Live Preview

Members

Section titled “Members ”

Transition   Component

Section titled “Transition   Component ”

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

Properties
children
Section titled “children”
Node

The node to be transitioned.

direction
Section titled “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
Section titled “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
Section titled “noAnimation”
Boolean

Disables transition animation.

When false, visibility changes animate.

Default: false
onHide
Section titled “onHide”
Function

Called after transition for hiding is finished.

onShow
Section titled “onShow”
Function

Called after transition for showing is finished.

timingFunction
Section titled “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
Section titled “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 affect 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
Section titled “visible”
Boolean

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

Default: true
Transition(  ) →

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

0 Params
Returns

TransitionBase   Component

Section titled “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.

Properties
childRef
Section titled “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
Section titled “children”
Node

The node to be transitioned.

clipHeight
Section titled “clipHeight”
Number

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

Default: null
clipWidth
Section titled “clipWidth”
Number

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

Default: null
css
Section titled “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
Section titled “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
Section titled “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
Section titled “noAnimation”
Boolean

Disables transition animation.

When false, visibility changes animate.

Default: false
timingFunction
Section titled “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
Section titled “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 affect 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
Section titled “visible”
Boolean

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

Default: true