EkoTransition is a wrapper for UI Components which handles display logic and animating their appearance/disappearance.
It wraps components with an extra div
, which gets applied with the styles in transitionStyles
for the given mode.
It also makes sure the component gets added to the DOM before the appear animation starts, and is removed from the DOM
only after the disappear animation had completed.
A component is wrapped by EkoTransition if it has enableTransition: true
set in its props.
Visibility is determined in either of two ways: a stateSourceId
OR a visibilitySelector
function.
One of these must be defined for EkoTransition to work. If both are defined, visibilitySelector
takes precedence
- Table of Contents
Props
stateSourceId
the id of the UI Controller that specifies visibility for the component this transition wraps. State is defined by the property visible
in globalState.ui.controller[stateSourceId]
visibilitySelector
A selector function that gets as an input the global state and returns a path to a boolean which determines if this component should be visible or not. This boolean can be set, for example, using the variables plugin.
Example
player.ui.add('healthBar', EkoGroup, {
enableTransition: true,
visibilitySelector: globalState => globalState.variables.showHealthbar
});
[transitionStyles]
A map of React style objects that will be applied to the wrapping div on component visibility change.
If not specified, the default transition is fade-in/fade-out.
Properties
Name | Type | Description |
---|---|---|
entering- | object |
the component begins entering transition |
entered | object |
the component finished its entering transition and is now visible |
exiting | object |
the component begins its exiting transition |
exited | object |
the component had finished its existing transition, and is ready to appear again |
Example (Adding custom transition based on animate.css's zoomIn/zoomOut)
player.ui.add('myButton', FancyButton, {
enableTransition: true,
transitionStyles: {
entering: { transform: 'scale3d(1, 1, 1)', opacity: 1 },
entered: { transform: 'scale3d(1, 1, 1)', opacity: 1 },
exiting: { transform: 'scale3d(0.3, 0.3, 0.3)', opacity: 0 },
exited: { transform: 'scale3d(0.3, 0.3, 0.3)', opacity: 0 }
},
transitionInDuration: 2,
transitionOutDuration: 2
});
[transitionInDuration]
The amount in seconds the transition in should take. Default is 1 second
[transitionOutDuration]
The amount in seconds the transition out should take. Default is 1 second