@microsoft/windows-admin-center-sdk/core/data/animation.d.ts

Microsoft - Windows Admin Center Shell

import { Observable } from 'rxjs';
/**
 * The duration in milliseconds (ms) of an animation.
 */
export declare enum Duration {
    Xs = 100,
    Sm = 167,
    Md = 267,
    Lg = 367,
    Xl = 467
}
/**
 * The options for animating an element.
 */
export interface AnimationOptions {
    /**
     * The animation CSS class(es) for animating an element.
     */
    animationClass: string | string[];
    /**
     * The duration of an animation in milliseconds (ms).
     */
    duration: Duration;
    /**
     * Whether to remove the animation CSS class(es) after the animation has completed.
     */
    removeClass?: boolean;
}
/**
 * The available animation CSS classes and associated durations in milliseconds (MS).
 */
export declare const animations: {
    slide: {
        in: {
            right: {
                xs: AnimationOptions;
                sm: AnimationOptions;
                md: AnimationOptions;
                xl: AnimationOptions;
            };
            left: {
                xs: AnimationOptions;
                sm: AnimationOptions;
                md: AnimationOptions;
                xl: AnimationOptions;
            };
            up: {
                xs: AnimationOptions;
                sm: AnimationOptions;
                md: AnimationOptions;
                xl: AnimationOptions;
            };
            down: {
                xs: AnimationOptions;
                sm: AnimationOptions;
                md: AnimationOptions;
                xl: AnimationOptions;
            };
        };
        out: {
            right: {
                xs: AnimationOptions;
                sm: AnimationOptions;
                md: AnimationOptions;
                xl: AnimationOptions;
            };
            left: {
                xs: AnimationOptions;
                sm: AnimationOptions;
                md: AnimationOptions;
                xl: AnimationOptions;
            };
            up: {
                xs: AnimationOptions;
                sm: AnimationOptions;
                md: AnimationOptions;
                xl: AnimationOptions;
            };
            down: {
                xs: AnimationOptions;
                sm: AnimationOptions;
                md: AnimationOptions;
                xl: AnimationOptions;
            };
        };
    };
    fade: {
        in: {
            xs: AnimationOptions;
            sm: AnimationOptions;
            md: AnimationOptions;
            lg: AnimationOptions;
            xl: AnimationOptions;
        };
        out: {
            xs: AnimationOptions;
            sm: AnimationOptions;
            md: AnimationOptions;
            lg: AnimationOptions;
            xl: AnimationOptions;
        };
    };
    scale: {
        in: {
            up: {
                sm: AnimationOptions;
                neutral: AnimationOptions;
                lg: AnimationOptions;
            };
            down: {
                sm: AnimationOptions;
                neutral: AnimationOptions;
                lg: AnimationOptions;
            };
        };
        out: {
            up: {
                sm: AnimationOptions;
                neutral: AnimationOptions;
                lg: AnimationOptions;
            };
            down: {
                sm: AnimationOptions;
                neutral: AnimationOptions;
                lg: AnimationOptions;
            };
        };
    };
    transition: {
        height: {
            xs: AnimationOptions;
            sm: AnimationOptions;
            md: AnimationOptions;
            lg: AnimationOptions;
            xl: AnimationOptions;
        };
        width: {
            xs: AnimationOptions;
            sm: AnimationOptions;
            md: AnimationOptions;
            lg: AnimationOptions;
            xl: AnimationOptions;
        };
    };
    rotate: {
        left: {
            md: AnimationOptions;
        };
        right: {
            md: AnimationOptions;
        };
    };
};
/**
 * A utility class for animating HTML elements.
 */
export declare class Animator {
    /**
     * Animates a HTML element.
     *
     * @param element The HTML element to animate.
     * @param options The options to animate the element with.
     * @returns A void observable for the animation event.
     */
    static animate(element: HTMLElement, ...options: AnimationOptions[]): Observable<void>;
    /**
     * Animates a HTML element to slide in to the left.
     *
     * @param element The HTML element to animate.
     * @param duration The duration of the animation.
     * @param removeClass Whether to remove the animation CSS class from the element once the animation completes.
     * @returns A void observable for the animation event.
     */
    static slideInToLeft(element: HTMLElement, duration: Duration, removeClass?: boolean): Observable<void>;
    /**
     * Animates a HTML element to slide in to the right.
     *
     * @param element The HTML element to animate.
     * @param duration The duration of the animation.
     * @param removeClass Whether to remove the animation CSS class from the element once the animation completes.
     * @returns A void observable for the animation event.
     */
    static slideInToRight(element: HTMLElement, duration: Duration, removeClass?: boolean): Observable<void>;
    /**
     * Animates a HTML element to slide out to the left.
     *
     * @param element The HTML element to animate.
     * @param duration The duration of the animation.
     * @param removeClass Whether to remove the animation CSS class from the element once the animation completes.
     * @returns A void observable for the animation event.
     */
    static slideOutToLeft(element: HTMLElement, duration: Duration, removeClass?: boolean): Observable<void>;
    /**
     * Animates a HTML element to slide out to the right.
     *
     * @param element The HTML element to animate.
     * @param duration The duration of the animation.
     * @param removeClass Whether to remove the animation CSS class from the element once the animation completes.
     * @returns A void observable for the animation event.
     */
    static slideOutToRight(element: HTMLElement, duration: Duration, removeClass?: boolean): Observable<void>;
}