Options
All
  • Public
  • Public/Protected
  • All
Menu

An animation provider that executes animations using CSS Transitions in browsers that support them. Rather than interpolate between keyframe values and perform DOM IO every frame, as many animation libraries do, CssTransitionAnimationProvider executes animations by offloading as much work to the browser as possible via transitions. Read/write operations from/to the DOM are kept to a minimum and synchronized with animation frames via browsers' requestAnimationFrame. The only DOM changes to elements being animated are changes to their CSS class names. Each keyframe in an animation is represented by a CSS class. Arbitrary, defined-in-code animations are handled by emitting keyframe properties and values into CSS classes inside of an internal style sheet.

Hierarchy

Implements

Index

Constructors

constructor

Properties

Protected _cachedKeyframeMap

_cachedKeyframeMap: object

Type declaration

Protected _cachedKeyframesArray

_cachedKeyframesArray: CachedKeyframe[]

Protected _cssPropertyNameMap

_cssPropertyNameMap: __type

Protected _emittedStylesheet

_emittedStylesheet: CSSStyleSheet

Protected _poolFlushFactor

_poolFlushFactor: number

Protected _poolSize

_poolSize: number

Protected _poolSizeTarget

_poolSizeTarget: number

Protected _prevElement

_prevElement: HTMLElement

Static Protected _animatableProperties

_animatableProperties: string[]

These are used as a manual fallback in case getComputedStyle isn't supported.

Methods

Protected _generateFrameId

  • _generateFrameId(): string
  • Generates a frame ID that is also used as a CSS class name.

    Returns string

Protected _getCachedKeyframeData

  • Creates a style rule for an {@link AnimationKeyFrame}, if one does not already exist.

    Parameters

    • element: HTMLElement
    • frame: AnimationKeyframe

      The keyframe to create the style block for, if one does not already exist.

    Returns CachedKeyframe

Protected _getHashKey

  • Gets a hash key for an {@link AnimationKeyFrame}. This is used to uniquely identify the frame contents, rather than the frame instance. In other words, two different frame objects with the exact same properties and values are considered the same.

    Parameters

    Returns string

Protected _getKeyframeDuration

  • _getKeyframeDuration(element: HTMLElement): number
  • Gets the current transition duration associated with and element. This is a relatively expensive operation and should ideally be avoided by manually specifying durations in keyframes.

    Parameters

    • element: HTMLElement

      The HTML element to compute duration from.

    Returns number

Protected _removeKeyframesFromStylesheets

  • _removeKeyframesFromStylesheets(keyframesToRemove: CachedKeyframe[], orderPreserved?: boolean): void
  • Parameters

    • keyframesToRemove: CachedKeyframe[]
    • Optional orderPreserved: boolean

    Returns void

Protected _setPoolOptions

  • _setPoolOptions(options: any): void
  • Parameters

    • options: any

    Returns void

Protected _setupPropertyMap

  • _setupPropertyMap(): void
  • Sets up a property map to map between JavaScript and CSS property names. This allows animation keyframes to be defined in JavaScript using the JavaScript names of CSS properties. It also lets animation authors disregard prefixes.

    Returns void

Protected _setupStylesheet

  • _setupStylesheet(): void
  • Creats a style sheet to hold emitted classes.

    Returns void

Protected _swapKeyframeSets

  • _swapKeyframeSets(newKeyframeArray: CachedKeyframe[], newKeyframeMap: object): void
  • Parameters

    Returns void

animate

flushKeyframes

  • flushKeyframes(): void
  • Flushes CSS classes from the stylesheet that holds the keyframes. This ensures that the stylesheet does not grow too big over time.

    Returns void

Protected getCssNameForProperty

  • getCssNameForProperty(property: string): string
  • Gets the CSS name for a JavaScript property name, e.g. returns background-color for backgroundColor. Performs browser-based prefixing.

    Parameters

    • property: string

    Returns string

getKeyframeStyleCount

  • getKeyframeStyleCount(): number
  • Returns the number of emitted keyframes that currently exist in the emission stylesheet.

    Returns number