@exadel/esl/modules/esl-animate/core/esl-animate-service.d.ts

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

/** ESLAnimateService animation options */
export interface ESLAnimateConfig {
    /** Class(es) to mark element animated */
    cls?: string;
    /** Animate if class already presented */
    force?: boolean;
    /** Animate items in group one by one, using groupDelay */
    group?: boolean;
    /** Delay to display element(s) after previous one. Used when group animation is enabled. Default: 100ms */
    groupDelay?: number;
    /** Do not unsubscribe after animate and repeat animation on each viewport intersection */
    repeat?: boolean;
    /**
     * Intersection ratio to consider element as visible.
     * Only 0.2 (20%), 0.4 (40%), 0.6 (60%), 0.8 (80%) values are allowed due to share of IntersectionObserver instance
     * with a fixed set of thresholds defined.
     * Default: 0.4 (40%)
     */
    ratio?: number;
}
/** ESLAnimateService animation inner options. Contains system animation properties */
interface ESLAnimateConfigInner extends ESLAnimateConfig {
    cls: string;
    ratio: number;
    groupDelay: number;
    /** (private) animation requested */
    _timeout?: number;
    /** (private) marker to unobserve */
    _unsubscribe?: boolean;
}
/** Service to animate elements on viewport intersection */
export declare class ESLAnimateService {
    /** ESLAnimateService default animation configuration */
    protected static DEFAULT_CONFIG: ESLAnimateConfigInner;
    /** ESLAnimationService IntersectionObserver properties */
    protected static OPTIONS_OBSERVER: IntersectionObserverInit;
    /**
     * Subscribe ESlAnimateService on element(s) to animate it on viewport intersection
     * @param target - element(s) or elements to observe and animate
     * @param config - optional animation configuration
     */
    static observe(target: Element | Element[], config?: ESLAnimateConfig): void;
    /** Unobserve element or elements */
    static unobserve(target: Element | Element[]): void;
    /** @returns if service observing target */
    static isObserved(target: Element): boolean;
    private static get instance();
    protected _io: IntersectionObserver;
    protected _entries: Set<Element>;
    protected _configMap: WeakMap<Element, ESLAnimateConfigInner>;
    protected deferredOnAnimate: import("../../esl-utils/async/debounce").Debounced<() => void>;
    /**
     * Subscribe ESlAnimateService on element(s) to animate it on viewport intersection
     * @param el - element or elements to observe and animate
     * @param config - optional animation configuration
     */
    observe(el: Element, config?: ESLAnimateConfig): void;
    /** Unobserve element or elements */
    unobserve(el: Element): void;
    /** @returns if service observing target */
    isObserved(target: Element): boolean;
    /** Intersection observable callback */
    protected onIntersect(entries: IntersectionObserverEntry[]): void;
    /** Process animation query */
    protected onAnimate(): void;
    /** Animates passed item */
    protected onAnimateItem(item: Element): void;
}
declare global {
    export interface ESLLibrary {
        AnimateService: typeof ESLAnimateService;
    }
}
export {};