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 visibilitySelector function.
One of these must be defined for EkoTransition to work. If both are defined, visibilitySelector takes precedence

• Table of Contents
  • Props
    • stateSourceIdp
    • visibilitySelectorp
    • [transitionStyles]p
    • [transitionInDuration]p
    • [transitionOutDuration]p

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]

visibilitySelector

property

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]

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