Options
All
  • Public
  • Public/Protected
  • All
Menu

Class AbstractTransitionController<T>

AbstractTransitionController

The AbstractTransitionController is the main class of the module. See the sub-pages for detailed information about the properties and methods.

Type parameters

  • T

    This param defines the type of the parent controller, this is of course framework specific.

Hierarchy

  • EventDispatcher
    • AbstractTransitionController

Implements

  • IDisposable
  • IEventDispatcher

Index

Constructors

constructor

  • 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.

    Parameters

    Returns AbstractTransitionController

Properties

isHidden

isHidden: boolean = true

The isHidden property gives you the current transition state of the component. A component is either hidden or not.

loopingAnimationStarted

loopingAnimationStarted: boolean = false

The loopingAnimationStarted property gives you the current looping transition state of the component a looping animation is either running or not.

loopingAnimationTimeline

loopingAnimationTimeline: TimelineMax

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.

parent

parent: EventDispatcher

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.

see

dispatchEvent for more information on the bubbling and capturing chain

parentController

parentController: T

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.

transitionInTimeline

transitionInTimeline: TimelineMax

The transitionInTimeline property is the timeline that is used for the in animation of the component.

transitionOutTimeline

transitionOutTimeline: TimelineMax

The transitionOutTimeline property is the timeline that is used for the out animation of the component.

Methods

addEventListener

  • addEventListener(eventType: string, handler: EventHandler, useCapture?: boolean, priority?: number): EventListenerData
  • Adds a new event listener. The given handler function will be called in the following cases:

    • An event with a [[IEvent.type|type]] that is equal to the given eventType is dispatched on this EventDispatcher instance.
    • An event with a [[IEvent.type|type]] that is equal to the given eventType is dispatched on a child EventDispatcher, and the useCapture parameter is set to true
    • An event with [[IEvent.bubbles|bubbles]] set to true and a [[IEvent.type|type]] that is equal to the given eventType is dispatched on a child EventDispatcher, and the useCapture parameter is set to false
    see

    dispatchEvent for more info on the which event listeners are called during capturing and bubbling

    Parameters

    • eventType: string

      The eventType to listen for

    • handler: EventHandler

      The handler function that will be called when a matching event is dispatched. This function will retrieve the dispatched [[IEvent|event]] as a parameter

    • Optional useCapture: boolean

      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.

    • Optional priority: number

      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.

    Returns EventListenerData

    An object describing the listener that has a [[EventListenerData.dispose|dispose()]] method to remove the listener.

dispatchEvent

  • dispatchEvent(event: IEvent): boolean
  • Dispatches the given event. The dispatch consists of three phases:

    1. The capture phase. We walk through all ancestors of this EventDispatcher, with the top-most instance first and the direct parent of this EventDispatcher last. On each ancestor, we call all event handlers that are added with the useCapture argument set to true and the eventType set to the same [[IEvent.type|type]] as the given event. If this EventDispatcher has no parent, this phase will be skipped.
    2. The target phase. In this phase we call all event handlers on this EventDispatcher instance that listen for the same [[IEvent.type|type]] as the given event.
    3. The bubbling phase. This phase will only be executed if the given event has the [[IEvent.bubbles|bubbles]] property set to 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 [[IEvent.type|type]] as the given event.

    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.

    Parameters

    • event: IEvent

      The event to dispatch

    Returns boolean

    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

dispose

  • dispose(): void
  • Because Vue destructs the VM instance before it removes the DOM node we want to finish the transition out before actually cleaning everything

    Returns void

Protected Abstract getComponent

  • Method that should be created based on your framework. It retrieves a component based on a string, HTMLElement or the generic

    Parameters

    Returns T

    The instance of the component that is requested

getTimeline

  • 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.

    Parameters

    • component: ComponentSelector<T>

      The selector for the component that you want the timeline for

    • Default value direction: TransitionDirection = TransitionDirection.IN

      The direction of the timeline that you want

    • Default value reset: boolean = false

      This flag determines if we reset the existing timeline or re-create it from scratch

    • Optional id: string

      This is the id of the timeline that we are requesting

    Returns Animation

    The timeline that is retrieved

getTimelineDurationForComponent

  • Parameters

    • component: ComponentSelector<T>

      The selector for the component that you want to get the timeline for

    • Default value direction: TransitionDirection = TransitionDirection.IN

      The direction that you want to check for

    • Default value reset: boolean = false

      This flag determines if we reset the existing timeline or re-create it from scratch

    • Optional id: string

      This is the id of the timeline that we are requesting

    Returns number

    The duration of the timeline

hasEventListener

  • hasEventListener(eventType: string, handler?: EventHandler, useCapture?: boolean): boolean
  • Checks if an event listener matching the given parameters exists on this EventDispatcher instance.

    Parameters

    • eventType: string

      Will only look for event listeners with this eventType

    • Optional handler: EventHandler

      If set, will only match event listeners that have the same handler function

    • Optional useCapture: boolean

      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

    Returns boolean

    True if one or more event listeners exist

Protected init

  • init(): void

isDisposed

  • isDisposed(): boolean
  • After dispose has been called, this method returns true. Use this method to determine whether dispose() should be run again.

    Returns boolean

removeAllEventListeners

  • removeAllEventListeners(eventType?: string): void
  • 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

    Parameters

    • Optional eventType: string

      The [[IEvent.type|type]] of event to remove. If not provided, all event listeners will be removed regardless of their type.

    Returns void

removeEventListener

  • removeEventListener(eventType: string, handler: EventHandler, useCapture?: boolean): void
  • 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

    Parameters

    • eventType: string

      Only event listeners of that have this eventType are removed

    • handler: EventHandler

      Only event listeners that have this handler function will be removed

    • Optional useCapture: boolean

      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.

    Returns void

resetTimeline

Protected Abstract setupLoopingAnimationTimeline

  • setupLoopingAnimationTimeline(timeline: TimelineMax, parent: T, id: string): void
  • This method is actually set's up the looping timeline. it should contain all the animations that are required for looping.

    Parameters

    • timeline: TimelineMax

      The reference to the looping timeline

    • parent: T

      The reference to the parent instance

    • id: string

      The id of the looping animation that should be initialized

    Returns void

setupTimeline

  • setupTimeline(type: TimelineType, reset?: boolean, id?: string): void
  • Setup timeline is a wrapper method that calls the correct setup methods and clears any old timelines if necessary

    Parameters

    • type: TimelineType

      This is the type of timeline that will be initialized.

    • Default value reset: boolean = true

      This means the timeline will be cleared before initializing

    • Optional id: string

      This is the id of the timeline that should be initialized.

    Returns void

Protected Abstract setupTransitionInTimeline

  • setupTransitionInTimeline(timeline: TimelineMax, parent: T, id: string): void
  • 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.

    Parameters

    • timeline: TimelineMax

      The reference to the transition in timeline

    • parent: T

      The reference to the parent instance

    • id: string

      The id of the transition in timeline that should be initialized

    Returns void

Protected Abstract setupTransitionOutTimeline

  • setupTransitionOutTimeline(timeline: TimelineMax, parent: T, id: string): void
  • 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.

    Parameters

    • timeline: TimelineMax

      The reference to the transition out timeline

    • parent: T

      The reference to the parent instance

    • id: string

      The id of the transition out timeline that should be initialized

    Returns void

startLoopingAnimation

  • startLoopingAnimation(id?: string, reset?: boolean): void
  • This method is pretty straightforward will start the loopingAnimationTimeline.

    Parameters

    • Default value id: string = this.options.loopId

      This is the id of the timeline that you want to start

    • Default value reset: boolean = false

      This means that the timeline will be re-initialized.

    Returns void

stopLoopingAnimation

  • stopLoopingAnimation(): void

transitionIn

  • transitionIn(forceTransition?: boolean): Promise<void>
  • 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.

    Parameters

    • Default value forceTransition: boolean = false

    Returns Promise<void>

transitionOut

  • transitionOut(forceTransition?: boolean, id?: string, reset?: boolean): Promise<void>
  • /** 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.

    Parameters

    • Default value forceTransition: boolean = false

      Forcing a transition means that the old transition out will be stopped!

    • Default value id: string = this.options.transitionOutId

      This is the id of the transition out timeline that you want to trigger

    • Default value reset: boolean = false

      This means that the transition out timeline will be re-initialized.

    Returns Promise<void>

willTrigger

  • willTrigger(eventType: string): boolean
  • Checks if an event listener with a [[EventListenerData.type|type]] of the given eventType exists on this EventDispatcher or any ancestor EventDispatcher instance.

    Parameters

    • eventType: string

      The event type to check for

    Returns boolean

    true if a matching listener is found

Generated using TypeDoc