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.
An object containing all event listeners by [[AbstractEvent.type|event type]]. Each value on this object is an Array of [[EventListenerData]] objects for each event listener added with that type.
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 value that will be set as [[AbstractEvent.target|target]] on events that are dispatched by this EventDispatcher instance. Set to the value passed to the constructor
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:
eventType is dispatched
on this EventDispatcher instance.eventType is dispatched
on a child EventDispatcher, and the useCapture parameter is set to truetrue and a [[AbstractEvent.type|type]] that
is equal to the given eventType is dispatched on a child EventDispatcher, and the
useCapture parameter is set to falseThe eventType to listen for
The handler function that will be called when a matching event is dispatched. This function will retrieve the dispatched [[AbstractEvent|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:
useCapture argument
set to true and the eventType set to the same [[AbstractEvent.type|type]] as
the given event.
If this EventDispatcher has no parent, this phase will be skipped.true. If so, we will again walk through
all ancestors of this EventDispatcher, but in the reverse order: the direct parent
of this instance first and the top-most parent last. On every ancestor, we will call
all event handlers that are added with the useCapture argument set to false and the
eventType set to the same [[AbstractEvent.type|type]] as the given event.If any of the event handlers call [[AbstractEvent.stopPropagation|stopPropagation()]], we will skip all event handlers that occur on a target later in the event chain. If an event handler calls [[AbstractEvent.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 [[AbstractEvent.preventDefault|event.preventDefault()]], this method will return false.
If no handlers have been called or none of the handlers have called
[[AbstractEvent.preventDefault|event.preventDefault()]], this method will return true.
Please note: [[AbstractEvent.preventDefault|preventDefault()]] can only be called on events that have their [[AbstractEvent.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
This method finds a component based on a string, a html element or the instance.
The selector for the component
The instance of the component you 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
useCaptureargument was provided to addEventListener, it is set tofalseby 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.
Method that is used to sort arrays of event listeners based on their [[EventListenerData.priority|priority]] property. Higher priority will be sorted before lower priority values.
The first event listener to compare
The other event listener to compare to
A number that indicates the sorting according to the JS sort() method.
Removes all event listeners that have a [[AbstractEvent.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 [[AbstractEvent.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
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.