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

interface EntranceClipModifiers {
    commitsStyles: boolean;
    composite: CompositeOperation;
    cssClasses: Partial<CssClassOptions>;
    hideNowType: null | "display-none" | "visibility-hidden";
}

Hierarchy (view full)

Properties

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: CompositeOperation

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

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.
hideNowType: null | "display-none" | "visibility-hidden"

Determines whether/how the element should be hidden as soon as the clip is instantiated (i.e., right when Entrance() is called). This can be convenient because it ensures that the element will be hidden before the entrance clip is played.

  • if null, the clip does not attempt to hide the element upon the clip's instantiation
  • if 'display-none', the element is unrendered by setting the CSS display to none
  • if 'visibility-hidden', the element is turned invisible by setting the CSS visibility to hidden