Options
All
  • Public
  • Public/Protected
  • All
Menu

Class AbstractTransitionController

class

AbstractTransitionController

description

This class is used by all components that you want to be transition in/out

When extending the AbstractTransitionController a transition out timeline is not required. If it's not provided it will reverse the transition in timeline when transition out is triggered.

Hierarchy

  • EventDispatcher
    • AbstractTransitionController

Implements

  • IDisposable
  • IEventDispatcher

Index

Constructors

constructor

Properties

Private _forward

_forward: boolean = true
property

_forward

type

{ boolean }

description

Since GreenSock does not trigger a on reverse start event we use this to figure out that the timeline has been reversed

Private _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.

Private _lastTime

_lastTime: number = 0
property

_lastTime

type

{number}

description

Since GreenSock does not trigger a on reverse start event we use this to figure out that the timeline has been reversed

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
property

_transitionInRejectMethod

type

{ ()=>void }

description

The reject method used for rejecting the transition in promise.

Type declaration

    • (): void
    • Returns void

Private _transitionInResolveMethod

_transitionInResolveMethod: function
property

_transitionInResolveMethod

type

{ ()=>void }

description

The resolve method used for resolving the transition in promise.

Type declaration

    • (): void
    • Returns void

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.

Private _transitionOutRejectMethod

_transitionOutRejectMethod: function
property

_transitionOutRejectMethod

type

{ ()=>void }

description

The resolve method used for rejecting the transition out promise.

Type declaration

    • (): void
    • Returns void

Private _transitionOutResolveMethod

_transitionOutResolveMethod: function
property

_transitionOutResolveMethod

type

{ ()=>void }

description

The resolve method used for resolving the transition out promise.

Type declaration

    • (): void
    • Returns void

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

Protected transitionInTimeline

transitionInTimeline: TimelineLite | TimelineMax
property

transitionInTimeline { TimelineLite }

description

The timeline that is used for transition in animations.

Protected 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

Protected viewModel

type

{ IAbstractTransitionComponent }

description

The viewModel is the reference to the wrapping Vue.js component, you can use this to find references and other methods on the component.

Static Protected FORWARD

FORWARD: string = "AbstractTransitionController.FORWARD"

Static IN

IN: string = "AbstractTransitionController.IN"

Static OUT

OUT: string = "AbstractTransitionController.OUT"

Static Protected REVERSED

REVERSED: string = "AbstractTransitionController.REVERSED"

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 checkDirection

  • checkDirection(): void
  • method

    checkDirection

    description

    GreenSock does not support onReverseStart on a timeline therefore we have this little method chat checks for the direction and if ti's changed we handle it as if it's a reverse start§

    Returns void

Private clean

  • clean(): void

Protected clearTimeline

  • clearTimeline(timeline: TimelineLite | TimelineMax): void

Private cloneTimeline

  • cloneTimeline(source: TimelineLite | TimelineMax, direction: string): TimelineLite | TimelineMax

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

Private error

  • error(message: string): Error

getSubTimeline

  • method

    getSubTimeline

    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

    Returns Animation

Private getSubTimelineByComponentId

  • getSubTimelineByComponentId(component: string | HTMLElement | IAbstractTransitionComponent, direction: string): TimelineLite | TimelineMax

getSubTimelineDuration

Private handleTransitionComplete

  • handleTransitionComplete(type: string, direction?: string): void

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

Protected killAndClearTimeline

  • killAndClearTimeline(timeline: TimelineLite | TimelineMax): void

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

setupTransitionInTimeline

  • setupTransitionInTimeline(): void

setupTransitionOutTimeline

  • setupTransitionOutTimeline(): void

transitionIn

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

transitionOut

  • transitionOut(forceTransition?: boolean): 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
description

When set to true it will show logs!

useTimelineMax

useTimelineMax: boolean = false
description

Use TimelineMax instead of TimelineLite

Generated using TypeDoc