Montage Component Build-in / Build-out Animation

TOC {:toc}

For Stand-alone Components

Using CSS Transition

Encapsulate your build-in transition in 2 CSS classes, one for the starting point of the transition and another for the ending point. Set the CSS class names as String properties on the component: buildInCssClass and buildInTransitionCssClass.

For build-out, because component is already in the DOM and the starting point of transition is already known, you just need to supply 1 buildOutCssClass class and property on the component for the ending point before component is removed from DOM.

Using CSS Animation

Encapsulate your build-in transition in 1 CSS class. The start and end of animation can be defined using keyframes. Set the CSS class names as String properties on the component: buildInCssClass.

For build-out, supply 1 buildOutCssClass class and property on the component.

Other Notes

To override or disable transition, just set the build-in / build-out properties to something else or null. For example, for a component not to animate upon initial app load, then animate during subsequent enterDocument, set the build-in properties to null in enterDocument(firstTime), then reset them in didDraw.

For Components in Succession Component

Succession is a placeholder component similar to Slot. It keeps track of a stack of Passage objects, which define what goes in and out of Succession. If multiple build-in / build-out properties are set on Succession, Passage objects and/or components, they will take precedence from top to bottom.

Using Succession's transition

If Succession has build-in / build-out properties set on itself, everything inside the Succession will animate in the same manner.

See Succession API docs for more detail.

Using Transition Objects

If Transition objects has build-in / build-out properties set on itself, the source component's build-out and the destination component's build-in will be overridden.

See Transition API docs for more detail.

Using Component's own transition

If build-in / build-out properties are set on the components, they will animate in the same manner as when they're defined outside of Succession.

Design Documentation

parentComponent keeps pending & completed lists

No concept of "sender"

Build-in

_performBuildIn

If component is building out, clear it out of parent's _componentsPendingBuildOut

Build-out

detachFromParentComponent

Walk the tree (starting from this and down) to see if anything on the tree needs to build-out

Try traverseComponentTree

Simultaneously _performBuildOut on any component that need to build-out

_performBuildOut

Tell parent _childComponentWillBuildOut
Add build-out CSS class & event listener

transitionend / animationend, handeled in handleBuildinBuildout

Remove event listeners
Tell parent _childComponentDidBuildOut
Don't remove class; wait for parent to do it for all children together

parent _childComponentDidBuildOut

Add to completed list
if completed length == pending length (this will wait for all children to build out first)
loop and remove classList on children that built out
clear pending list
Draw self

_draw

Parent - if completed list isn't empty, go through it, detach, remove elements then clear it

Questions

What if this doesn't need to build-out but children do? - wait for all children to finish
Different build-out durations? - wait for all children to finish
parent vs. sender - parent, not sender

Future

Use unique #s to track if everything built out instead of array

rayshan/component-build-in-build-out.md