@studiometa/js-toolkit/utils/css/transition.d.ts

A set of useful little bits of JavaScript to boost your project! 🚀

export type ClassesOrStyles = string | string[] | Partial<CSSStyleDeclaration>;
export type TransitionStyles = {
    from?: ClassesOrStyles;
    active?: ClassesOrStyles;
    to?: ClassesOrStyles;
};
/**
 * Update either the classes or the styles of an element with the given method.
 */
export declare function setClassesOrStyles(element: HTMLElement, classesOrStyles: ClassesOrStyles, method?: 'add' | 'remove'): void;
/**
 * Manage CSS transition with class.
 *
 * @param  {HTMLElement|HTMLElement[]|NodeListOf<HTMLElement>} elementOrElements The target element or elements.
 * @param  {string|TransitionStyles}                           name              The name of the transition or an object with the hooks classesOrStyles.
 * @param  {string}                                            endMode           Whether to remove or keep the `to` classes/styles
 * @returns {Promise<void>}                                                      A promise resolving at the end of the transition.
 */
export declare function transition(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, name: string | TransitionStyles, endMode?: 'keep' | 'remove'): Promise<void>;