This param defines the type of the parent controller, this is of course framework specific.
The constructor initiates the class, it merges the default options with the provided options and creates the transition timelines.
Note: Keep in mind that the moment the transition controller is constructed it also calls the init method that triggers the methods to setup the timelines. So always cconstruct the transition controller after your component is ready.
The reference to the parent instance
The configuration object for the transition controller
The isHidden property gives you the current transition state of the component. A component is either hidden or not.
The loopingAnimationStarted property gives you the current looping transition state of the component a looping animation is either running or not.
The loopingAnimationTimeline property is the timeline that is used for the looping animations inside of a component. The timeline configuration is setup to loop until pause is called.
The parent EventDispatcher instance. If this instance has no parent, this value will be set to null. The parent is used in the bubbling and capturing phases of events.
The parentController gives you access to the class that constructed the transition controller. You might need this if you want to access elements from the parentController. For example in a Vue.js project you might want to access the $refs of you Vue.js component to setup your animations.
The transitionInTimeline property is the timeline that is used for the in animation of the component.
The transitionOutTimeline property is the timeline that is used for the out animation of the component.
Adds a new event listener. The given handler function will be called in the following cases:
The eventType to listen for
The handler function that will be called when a matching event is dispatched. This function will retrieve the dispatched [[IEvent|event]] as a parameter
Indicates if this handler should be called during the capturing phase of an event chain. If and only if this is set to false will this handler be called during the bubbling phase of an event chain.
A number that indicates the priority of this event listener relative to other event listeners of the same type on this EventDispatcher instance. A higher number indicates that this listener will be called earlier.
An object describing the listener that has a [[EventListenerData.dispose|dispose()]] method to remove the listener.
Dispatches the given event. The dispatch consists of three phases:
If any of the event handlers call [[IEvent.stopPropagation|stopPropagation()]], we will skip all event handlers that occur on a target later in the event chain. If an event handler calls [[IEvent.stopImmediatePropagation|stopImmediatePropagation()]], we will also skip any event handlers on the same target in the event chain.
The event to dispatch
If one of the handlers that have been called during this dispatch called [[IEvent.preventDefault|event.preventDefault()]], this method will return false. If no handlers have been called or none of the handlers have called [[IEvent.preventDefault|event.preventDefault()]], this method will return true.
Please note: [[IEvent.preventDefault|preventDefault()]] can only be called on events that have their [[IEvent.cancelable|cancelable]] property set to true
Because Vue destructs the VM instance before it removes the DOM node we want to finish the transition out before actually cleaning everything
Method that should be created based on your framework. It retrieves a component based on a string, HTMLElement or the generic
The reference to the component
The instance of the component that is requested
When nesting transition components you might want to nest the timelines as well, this makes it easier to time all the component transitions. Keep in mind that the getTimeline method returns a clone of the original timeline.
The selector for the component that you want the timeline for
The direction of the timeline that you want
This flag determines if we reset the existing timeline or re-create it from scratch
This is the id of the timeline that we are requesting
The timeline that is retrieved
The selector for the component that you want to get the timeline for
The direction that you want to check for
This flag determines if we reset the existing timeline or re-create it from scratch
This is the id of the timeline that we are requesting
The duration of the timeline
Checks if an event listener matching the given parameters exists on this EventDispatcher instance.
Will only look for event listeners with this eventType
If set, will only match event listeners that have the same handler function
If set, will only match event listeners that have the same useCapture argument. Please note: if no useCapture argument was provided to addEventListener, it is set to false by default
True if one or more event listeners exist
This method will be used for setting up the timelines for the component
After dispose has been called, this method returns true. Use this method to determine whether dispose() should be run again.
Removes all event listeners that have a [[IEvent.type|type]] of the given eventType from this EventDispatcher instance, regardless of their [[EventListenerData.handler|handler]] or [[EventListenerData.useCapture|useCapture]] property.
Please note: if you remove an event listener during the dispatch of an event it will not be called anymore, even if it was supposed to be called in the same event chain
The [[IEvent.type|type]] of event to remove. If not provided, all event listeners will be removed regardless of their type.
Removes all event listeners that match the given parameters from this EventDispatcher instance.
Please note: if you remove an event listener during the dispatch of an event it will not be called anymore, even if it was supposed to be called in the same event chain
Only event listeners of that have this eventType are removed
Only event listeners that have this handler function will be removed
Only event listeners that have been added with the same useCapture parameter will be removed. Please note: if no useCapture argument is provided, only event listeners that have useCapture set to false will be removed.
This method is actually set's up the looping timeline. it should contain all the animations that are required for looping.
The reference to the looping timeline
The reference to the parent instance
The id of the looping animation that should be initialized
Setup timeline is a wrapper method that calls the correct setup methods and clears any old timelines if necessary
This is the type of timeline that will be initialized.
This means the timeline will be cleared before initializing
This is the id of the timeline that should be initialized.
This method is actually set's up the transition in timeline. it should contain all the animations that are required for the transition in to done.
The reference to the transition in timeline
The reference to the parent instance
The id of the transition in timeline that should be initialized
This method is actually set's up the transition out timeline. it should contain all the animations that are required for the transition out to done.
The reference to the transition out timeline
The reference to the parent instance
The id of the transition out timeline that should be initialized
This method is pretty straightforward will start the loopingAnimationTimeline.
This is the id of the timeline that you want to start
This means that the timeline will be re-initialized.
This method is pretty straightforward will stop the loopingAnimationTimeline.
The transitionIn method restarts the transitionInTimeline and returns a promise to let you know that is is done with the animation. By default the transition in will wait for any old transitionOut that is still running. If you want to force your transition in and kill any running transitionOut animations you should set the forceTransition flag to true when calling the transitionIn method.
/** The transitionOut method will look if the transitionOutTimeline has any animations added to it. If no animations were added it will reverse the transitionInTimeline. Otherwise it will restart the transitionOutTimeline.
Forcing a transition means that the old transition out will be stopped!
This is the id of the transition out timeline that you want to trigger
This means that the transition out timeline will be re-initialized.
Checks if an event listener with a [[EventListenerData.type|type]] of the given eventType exists on this EventDispatcher or any ancestor EventDispatcher instance.
The event type to check for
true if a matching listener is found
Generated using TypeDoc
AbstractTransitionController
The AbstractTransitionController is the main class of the module. See the sub-pages for detailed information about the properties and methods.