TransitionNode¶

Overview¶

Holds content, and can transition to other content with a variety of animations. During a transition, there is always the "from" content that animates out, and the "to" content that animates in.

@author Jonathan Olson <jonathan.olson@colorado.edu>

Class TransitionNode¶

import { TransitionNode } from 'scenerystack/twixt';

Constructor¶

new TransitionNode( transitionBoundsProperty : TReadOnlyProperty<Bounds2>, providedOptions? : TransitionNodeOptions )¶

Instance Methods¶

step( dt : number )¶

Steps forward in time, animating the transition.

interrupt()¶

Interrupts the transition, ending it and resetting the animated values.

slideLeftTo( content : Node | null, config? : SlideTransitionOptions ) : Transition¶

Start a transition to replace our content with the new content, using Transition.slideLeft.

@param content - If null, the current content will still animate out (with nothing replacing it). @param config - Passed as config to the Animation. Usually a duration should be included. @returns - Available to add end listeners, etc.

slideRightTo( content : Node | null, config? : SlideTransitionOptions ) : Transition¶

Start a transition to replace our content with the new content, using Transition.slideRight.

@param content - If null, the current content will still animate out (with nothing replacing it). @param config - Passed as config to the Animation. Usually a duration should be included. @returns - Available to add end listeners, etc.

slideUpTo( content : Node | null, config? : SlideTransitionOptions ) : Transition¶

Start a transition to replace our content with the new content, using Transition.slideUp.

@param content - If null, the current content will still animate out (with nothing replacing it). @param config - Passed as config to the Animation. Usually a duration should be included. @returns - Available to add end listeners, etc.

slideDownTo( content : Node | null, config? : SlideTransitionOptions ) : Transition¶

Start a transition to replace our content with the new content, using Transition.slideDown.

@param content - If null, the current content will still animate out (with nothing replacing it). @param config - Passed as config to the Animation. Usually a duration should be included. @returns - Available to add end listeners, etc.

wipeLeftTo( content : Node | null, config? : WipeTransitionOptions ) : Transition¶

Start a transition to replace our content with the new content, using Transition.wipeLeft.

@param content - If null, the current content will still animate out (with nothing replacing it). @param config - Passed as config to the Animation. Usually a duration should be included. @returns - Available to add end listeners, etc.

wipeRightTo( content : Node | null, config? : WipeTransitionOptions ) : Transition¶

Start a transition to replace our content with the new content, using Transition.wipeRight.

@param content - If null, the current content will still animate out (with nothing replacing it). @param config - Passed as config to the Animation. Usually a duration should be included. @returns - Available to add end listeners, etc.

wipeUpTo( content : Node | null, config? : WipeTransitionOptions ) : Transition¶

Start a transition to replace our content with the new content, using Transition.wipeUp.

@param content - If null, the current content will still animate out (with nothing replacing it). @param config - Passed as config to the Animation. Usually a duration should be included. @returns - Available to add end listeners, etc.

wipeDownTo( content : Node | null, config? : WipeTransitionOptions ) : Transition¶

Start a transition to replace our content with the new content, using Transition.wipeDown.

@param content - If null, the current content will still animate out (with nothing replacing it). @param config - Passed as config to the Animation. Usually a duration should be included. @returns - Available to add end listeners, etc.

dissolveTo( content : Node | null, config? : DissolveTransitionOptions ) : Transition¶

Start a transition to replace our content with the new content, using Transition.dissolve.

@param content - If null, the current content will still animate out (with nothing replacing it). @param config - Passed as config to the Animation. Usually a duration should be included. @returns - Available to add end listeners, etc.

dispose()¶

Type TransitionNodeOptions¶

import type { TransitionNodeOptions } from 'scenerystack/twixt';

• content?: Node | null
  Optionally may have initial content
• useBoundsClip?: boolean
  If true, a clip area will be set to the value of the transitionBoundsProperty so that outside content won't be shown.
• cachedNodes?: Node[]
  Any node specified in this array will be added as a permanent child internally, so that transitions to/from it doesn't incur higher performance penalties. It will instead just be invisible when not involved in a transition. Performance issues were initially noted in https://github.com/phetsims/equality-explorer/issues/75. Additional notes in https://github.com/phetsims/twixt/issues/17.
• & StrictOmit<NodeOptions, "children">

Source Code¶

See the source for TransitionNode.ts in the twixt repository.