EkoTransition

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 custom shouldShow function.
One of these must be defined for EkoTransition to work.

Props

stateSourceId
property

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]

shouldShow
property

A function that gets evaluated on render to determine if the wrapped component should be visible (and animate in/out accordingly). Should return true or false. If not defined, it is assumed that a stateSourceId is supplied.

[transitionStyles]
property

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]
property

The amount in seconds the transition in should take. Default is 1 second

[transitionOutDuration]
property

The amount in seconds the transition out should take. Default is 1 second

Rate this page: X
Tell us more!