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

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

import { ESLBaseElement } from '../../esl-base-element/core';
/**
 * ESLAnimate - custom element for quick {@link ESLAnimateService} attaching
 *
 * Have two types of usage:
 * - trough the target-s definition, then esl-animate (without it's own content) became invisible plugin-component
 * `<esl-animate target="::next"></esl-animate><div>Content</div>`
 * - trough the content wrapping
 * `<esl-animate>Content</esl-animate>`
 */
export declare class ESLAnimate extends ESLBaseElement {
    static is: string;
    static observedAttributes: string[];
    /**
     * Class(es) to add on viewport intersection
     * @see ESLAnimateConfig.cls
     */
    cls: string;
    /**
     * Enable group animation for targets
     * @see ESLAnimateConfig.group
     */
    group: boolean;
    /**
     * Delay to start animation from previous item in group
     * @see ESLAnimateConfig.groupDelay
     */
    groupDelay: string;
    /**
     * Re-animate item after its getting hidden
     * @see ESLAnimateConfig.repeat
     */
    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.
     */
    ratio: string;
    /**
     * Define target(s) to observe and animate
     * Uses {@link ESLTraversingQuery} with multiple targets support
     * Default: ` ` - current element, `<esl-animate>` behave as a wrapper
     */
    target: string;
    /** Elements-targets found by target query */
    get $targets(): HTMLElement[];
    protected attributeChangedCallback(): void;
    protected connectedCallback(): void;
    protected disconnectedCallback(): void;
    /** Reinitialize {@link ESLAnimateService} for targets */
    reanimate(): void;
}
declare global {
    export interface ESLLibrary {
        Animate: typeof ESLAnimate;
    }
    export interface HTMLElementTagNameMap {
        'esl-animate': ESLAnimate;
    }
}