Options
All
  • Public
  • Public/Protected
  • All
Menu

Class AbstractTransitionController<T>

class

AbstractTransitionController

description

The AbstractTransitionController is the base for your transitioning components.

What does it do:

  • Handling your components transitionIn and transitionOut method.
  • Create separate timelines for transition in and transition out.
  • Dispatch transition events to your parent class.
  • Force your component to transition in while it's still transitioning out and the other way around.
  • Retrieve cloned timelines so you can easily nest timelines within other timelines.
  • Setup a looping animation that can be started or stopped.

Passing along the parent instance: When creating a new instance of the transition controller make sure your parent controller contains a reference to the wrapping element because this is what you will use to run your querySelector and querySelectorAll on.

Do I need a transitionOut timeline: When setting up a new transition controller you do not need to define a transition out because if it's not provided it will use the reversed transition out as a fallback transition

Example usage:

const transitionController = new DummyTransitionController<ParentController>(this, {
  name: 'DummyController',
  debug: false,
  useTimelineMax: false,
});

transitionController.transitionIn();

Type parameters

  • T

Hierarchy

  • EventDispatcher
    • AbstractTransitionController

Implements

  • IDisposable
  • IEventDispatcher

Index

Constructors

constructor

Properties

Private _transitionOutPromise

_transitionOutPromise: Promise<void> = null
property

_transitionOutPromise

type

{ Promise }

description

The transition promise is used so we can wait for the transition out to be completed.

isHidden

isHidden: boolean = true
type

{boolean}

description

Check if the component is currently in the transitionedOut state, this is to avoid calling the transition out method when it's already transitioned out.

loopingAnimationStarted

loopingAnimationStarted: boolean = false
type

{boolean}

description

Flag that is used to keep track if the looping animations are running

loopingAnimationTimeline

loopingAnimationTimeline: TimelineMax
property

loopingAnimationTimeline { TimelineLite }

description

The timeline that is used for looping animations.

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
description

The parent controller

Private transitionInPromise

transitionInPromise: Promise<void> = null
property

transitionInPromise

type

{ Promise }

description

The transition promise is used so we can wait for the transition in to be completed.

Private transitionInRejectMethod

transitionInRejectMethod: function = null
property

transitionInRejectMethod

type

{ ()=>void }

description

The reject method used for rejecting the transition in promise.

Type declaration

    • (): void
    • Returns void

Private transitionInResolveMethod

transitionInResolveMethod: function = null
property

transitionInResolveMethod

type

{ ()=>void }

description

The resolve method used for resolving the transition in promise.

Type declaration

    • (): void
    • Returns void

transitionInTimeline

transitionInTimeline: TimelineLite | TimelineMax
property

transitionInTimeline { TimelineLite }

description

The timeline that is used for transition in animations.

Private transitionOutRejectMethod

transitionOutRejectMethod: function = null
property

transitionOutRejectMethod

type

{ ()=>void }

description

The resolve method used for rejecting the transition out promise.

Type declaration

    • (): void
    • Returns void

Private transitionOutResolveMethod

transitionOutResolveMethod: function = null
property

transitionOutResolveMethod

type

{ ()=>void }

description

The resolve method used for resolving the transition out promise.

Type declaration

    • (): void
    • Returns void

transitionOutTimeline

transitionOutTimeline: TimelineLite | TimelineMax
property

transitionOutTimeline { TimelineLite }

description

The timeline that is used for transition out animations. If no animations are added it will automatically use the reversed version of the transition in timeline for the out animations

Static Private counter

counter: number = 0
static

counter

description

a namespace counter used for unique naming of components

type

{number}

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.

Private clean

  • clean(): void

Private createTransitionTimelines

  • createTransitionTimelines(): void

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

    destruct

    description

    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

getTimeline

  • method

    getTimeline

    description

    When nesting transition components you might want to nest the timelines as well, this makes it easier to time all the component transitions

    Parameters

    • component: string | HTMLElement | T
    • Default value direction: TransitionDirection = TransitionDirection.IN

    Returns Animation

getTimelineDurationForComponent

  • getTimelineDurationForComponent(component: string | HTMLElement | T, direction?: TransitionDirection): number

Protected getTimelineForComponent

  • getTimelineForComponent(component: string | HTMLElement | T, direction: TransitionDirection): TimelineLite | TimelineMax

Private handleTransitionComplete

Private handleTransitionStart

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

setupLoopingAnimationTimeline

  • setupLoopingAnimationTimeline(timeline: TimelineMax): void
  • method

    setupLoopingAnimationTimeline

    description

    overwrite this method in the parent class

    Parameters

    • timeline: TimelineMax

    Returns void

setupTransitionInTimeline

  • setupTransitionInTimeline(timeline: TimelineLite | TimelineMax): void
  • method

    setupTransitionInTimeline

    description

    overwrite this method in the parent class

    Parameters

    • timeline: TimelineLite | TimelineMax

    Returns void

setupTransitionOutTimeline

  • setupTransitionOutTimeline(timeline: TimelineLite | TimelineMax): void
  • method

    setupTransitionOutTimeline

    description

    overwrite this method in the parent class

    Parameters

    • timeline: TimelineLite | TimelineMax

    Returns void

startLoopingAnimation

  • startLoopingAnimation(): void

stopLoopingAnimation

  • stopLoopingAnimation(): void

transitionIn

  • transitionIn(forceTransition?: boolean): Promise<void>

transitionOut

  • transitionOut(forceTransition?: boolean): Promise<void>
  • method

    transitionOut

    oaran

    { boolean } forceTransition

    Parameters

    • Default value forceTransition: boolean = false

    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

Object literals

Private options

options: object
property

options

description

the options for the controller

type

{{}}

debug

debug: boolean = false

name

name: string = `unnamed-component-${AbstractTransitionController.counter++}`

useTimelineMax

useTimelineMax: boolean = false

Generated using TypeDoc