ANI/play()

<<<<<<< HEAD:play-ui/v002/api/ani/play.md

play()

This function creates and play an animation. It is a convenient way to use the PlayUI's Ani class.

ANI/play()

This function creates and play an animation. It is a convenient way to use the PlayUI's Ani class.

cb39f35064f56fa8e785a6c3dc76ad40ec3a079d:play-ui/api/ani/play.md

Import

import play from '@web-native-js/play-ui/src/ani/play.js';

Syntax

let promise = play(el, effect[, timing = {}]);

Parameters

<<<<<<< HEAD:play-ui/v002/api/ani/play.md

  • el - HTMLElement: The source DOM element.

  • effect - Array|Object|String: The effect to play. This could be a standard keyframes array, a CSS object or a stylesheet-based animation name.

  • timing - Object: Options for the animation. See Ani.

  • el - HTMLElement: The source DOM element.

  • effect - Array|Object|String: The effect to play. This could be a standard keyframes array, a CSS object or a stylesheet-based animation name.

  • timing - Object: Options for the animation. See Ani.

    cb39f35064f56fa8e785a6c3dc76ad40ec3a079d:play-ui/api/ani/play.md

Return

  • Promise - A promise that resolves when the animation finishes.

Usage

Play from Standard Keyframes

Below, we fade out an element with keyframes.

let el = document.querySelector('#el');
play(el, [{opacity:1}, {opacity:0}], {duration:600}).then(el => {
console.log('The end!');
});

Play a CSS Transition

Below, we fade out an element by simply specifying a end-state keyframe and letting Ani derive the starting keyframe from the element's current state.

play(el, {opacity:0}, {duration:600}).then(el => {
console.log('The end!');
})

Play a CSS Animation Name

Below, we fade out an element with an animation keyframes defined in the document's stylesheet.

<style>
@keyframes fadeout {
0% { opacity: 1;}
100% { opacity: 0;}
}
</style>
play(el, 'fadeout', {duration:600}).then(el => {
console.log('The end!');
})