Montage Component Build-in / Build-out Animation

component-build-in-build-out.md

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