Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @swim/transition

@swim/transition

package documentation chat

@swim/transition implements transition types that specify duration, ease, interpolator, and lifecycle callback parameters for tween animations. @swim/transition is part of the @swim/ui framework.

Installation

npm

For an npm-managed project, npm install @swim/transition to make it a dependency. TypeScript sources will be installed into node_modules/@swim/transition/main. Transpiled JavaScript and TypeScript definition files install into node_modules/@swim/transition/lib/main. And a pre-built UMD script can be found in node_modules/@swim/transition/dist/main/swim-transition.js.

Browser

Browser applications can load swim-ui.js—which bundles the @swim/transition library—along with its swim-core.js dependency, directly from the Swim CDN.

<script src="https://cdn.swim.ai/js/latest/swim-core.js"></script>
<script src="https://cdn.swim.ai/js/latest/swim-ui.js"></script>

Alternatively, the standalone swim-system.js script may be loaded from the Swim CDN, which bundles @swim/transition together with all other @swim/system libraries.

<script src="https://cdn.swim.ai/js/latest/swim-system.js"></script>

Usage

ES6/TypeScript

@swim/transition can be imported as an ES6 module from TypeScript and other ES6-compatible environments.

import * as transition from "@swim/transition";

CommonJS/Node.js

@swim/transition can also be used as a CommonJS module in Node.js applications.

var transition = require("@swim/transition");

Browser

When loaded by a web browser, the swim-ui.js script adds all @swim/transition library exports to the global swim namespace. The swim-ui.js script requires that swim-core.js has already been loaded.

The swim-system.js script also adds all @swim/transition library exports to the global swim namespace, making it a drop-in replacement for 'swim-core.js' and swim-ui.js when additional @swim/system libraries are needed.

Index

Classes

Interfaces

Type aliases

Object literals

Type aliases

AnyEase

AnyEase: Ease | EaseType

AnyTransition

AnyTransition<T>: Transition<T> | TransitionInit<T>

Type parameters

  • T

EaseType

EaseType: "linear" | "quad-in" | "quad-out" | "quad-in-out" | "cubic-in" | "cubic-out" | "cubic-in-out" | "quart-in" | "quart-out" | "quart-in-out" | "expo-in" | "expo-out" | "expo-in-out" | "circ-in" | "circ-out" | "circ-in-out" | "back-in" | "back-out" | "back-in-out" | "elastic-in" | "elastic-out" | "elastic-in-out" | "bounce-in" | "bounce-out" | "bounce-in-out"

TransitionEnd

TransitionEnd<T>: function

Type parameters

  • T

Type declaration

    • (value: T): void

    • Parameters

      • value: T

      Returns void

TransitionInterrupt

TransitionInterrupt<T>: function

Type parameters

  • T

Type declaration

    • (value: T): void

    • Parameters

      • value: T

      Returns void

TransitionStart

TransitionStart<T>: function

Type parameters

  • T

Type declaration

    • (value: T): void

    • Parameters

      • value: T

      Returns void

Tween

Tween<T>: AnyTransition<T> | boolean

Type parameters

  • T

Object literals

Const Ease

Ease: object

backIn

backIn: Ease = backIn as Ease

backInOut

backInOut: Ease = backInOut as Ease

backOut

backOut: Ease = backOut as Ease

bounceIn

bounceIn: Ease = bounceIn as Ease

bounceInOut

bounceInOut: Ease = bounceInOut as Ease

bounceOut

bounceOut: Ease = bounceOut as Ease

circIn

circIn: Ease = circIn as Ease

circInOut

circInOut: Ease = circInOut as Ease

circOut

circOut: Ease = circOut as Ease

cubicIn

cubicIn: Ease = cubicIn as Ease

cubicInOut

cubicInOut: Ease = cubicInOut as Ease

cubicOut

cubicOut: Ease = cubicOut as Ease

elasticIn

elasticIn: Ease = elasticIn as Ease

elasticInOut

elasticInOut: Ease = elasticInOut as Ease

elasticOut

elasticOut: Ease = elasticOut as Ease

expoIn

expoIn: Ease = expoIn as Ease

expoInOut

expoInOut: Ease = expoInOut as Ease

expoOut

expoOut: Ease = expoOut as Ease

linear

linear: Ease = linear as Ease

quadIn

quadIn: Ease = quadIn as Ease

quadInOut

quadInOut: Ease = quadInOut as Ease

quadOut

quadOut: Ease = quadOut as Ease

quartIn

quartIn: Ease = quartIn as Ease

quartInOut

quartInOut: Ease = quartInOut as Ease

quartOut

quartOut: Ease = quartOut as Ease

form

fromAny