Interface TransitionClipModifiers

Contains details about how the DOM element is modified beyond just the effect of the animation (such as modifying CSS classes). Returned by TransitionClip.getModifiers.

See

TransitionClip.getModifiers

interface TransitionClipModifiers {
    commitsStyles: boolean;
    composite: CompositeOperation;
    cssClasses: Partial<CssClassOptions>;
    removeInlineStylesOnFinish: boolean;
}

Hierarchy (view full)

Properties

commitsStyles composite cssClasses removeInlineStylesOnFinish

Properties

commitsStyles

commitsStyles: boolean

Determines whether the effects of the animation will persist after the clip finishes.

  • if false, the effects of the animation will not persist after the clip finishes.
  • if true, the effects will attempt to be committed. If the element is not rendered by the time the clip finishes because of the CSS class "wbmtr-display-none", the clip will try to forcefully apply the styles by instantly unhiding the element, committing the animation styles, then re-hiding the element (necessary because JavaScript does not allow animation results to be saved to unrendered elements).
    • If the element is unrendered for any reason other than having the "wbmtr-display-none" class by the time the clip finishes, then this will fail, and an error will be thrown.

composite

composite: CompositeOperation

Resolves how an element's animation impacts the element's underlying property values.

See

KeyframeEffect: composite property

cssClasses

cssClasses: Partial<CssClassOptions>

Contains arrays of CSS classes that should be added to or removed from the element.

  • The array of classes to add is added first, and then the array of classes to remove is removed.
  • Changes are automatically undone in the appropriate order when the clip is rewound.

removeInlineStylesOnFinish

removeInlineStylesOnFinish: boolean

If true, any CSS property that this clip's effect targeted will be removed from the element's inline style after the clip finishes playing. For example, if a transition to a style involved changing width and backgroundColor, then the line styles for width and background-color will be deleted after the transition completes.

Remark

Practically, this is intended for the specific use case when an element is transitioning to a new style that is identical to its original state (as in, the transition style is the same as what is already specified in some CSS style for the element, so the inline style resulting from the transition is redundant). Removing the inline styles can be useful for preventing their higher precedence from impacting future attempts to modify the element's styles through normal CSS.

Settings

Member Visibility

On This Page

Properties