@x-three/css-animate v0.2.8

css-animate

Allows you to run CSS animations (transitions) from JavaScript code.

Installation

$ npm install --save @x-three/css-animate

Usage

/* JavaScript */
import { start } from '@x-three/css-animate';

const el = document.getElementById('square');

const stop = start(el, 'move', false, (interrupted) => {
    console.log(`The animation has been ${interrupted ? 'interrupted' : 'completed'}!`);
});

setTimeout(() => stop(), Math.random() * 1e4);

/* CSS */
#square {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    background: #000;
}

#square.move-from {
    left: 10%;
}

#square.move-active {
    transition: left 5s;
}

#square.move {
    left: 90%;
}

API

/**
 * Starts CSS animation with the given class.
 * @param el    Animated element.
 * @param clazz Animated class. The suffixes -from and -active are added to it at certain stages of the animation.
 * @param clear Whether to remove the class after the end of the animation.
 * @param cb    Callback, which is called after the end of the animation.
 */
function start(el: HTMLElement, clazz: string, clear: boolean = false, cb?: TCallback): TStop { ... }

type TCallback = (interrupted: boolean) => void;
type TStop = (clear?: boolean) => void;