Consolidate Transition into one class?

[anselmbradford]

trafficstars

There are currently three types of transitions (and a base transition). The transitions contain redundant boilerplate code, as seen in similarities like here and here.

@sebworks suggested we could have only one transition class and dynamically add methods based on the classes passed in when it is initialized. He built a demo example here.

The needs of transitions are to emit events during the life of the transition and to provide an API specific to the transition type, such as moveRight() for a MoveTransition and fadeIn() for an AlphaTransition. Lastly, they should provide a generic API for cancelling an in-progress transition and for turning the animating of the transition on and off so that it is possible to jump back and forth from the end states.

Each transition is built around CSS transitions and should have a set of CSS classes that cover…

• A base CSS transition class that defines the transition's duration and easing, and what CSS properties are transitioned (ex: u-move-transition).
• Additional CSS transition classes that define the end point states of each transition's associated CSS properties (ex: u-move-right for the moveRight() method).

As to behavior, the transitions should work as follows:

• For any particular HTMLNode to transition, the transition JS class should apply the base CSS class when it is first initialized.
• A call to each transition state method (moveRight(), moveLeft(), fadeOut(), etc.) should apply its corresponding CSS class and all other's (other than the base) should be removed so that there is never a situation where an element would have something like .u-move-transition.u-move-left.u-move-right.
• An API method to remove all transition CSS, including the base CSS class (remove() currently)
• API methods to turn animating on and off, so that when off the animation jumps to the specified end state. This controls whether u-no-animation is applied (in addition to the base class) to set the transition duration to zero. Also, a method that returns a boolean as to whether the transition is set to animate or not (isAnimated method).
• It is also possible to change the HTMLNode target of a transition with the setElement method. Possibly a transition doesn't need a new instance through the new keyword if all state is maintained through the classes on an HTMLNode and a single instance is just passed around to different HTMLNodes as needed.