igniteui-webcomponents/animations/view-transition.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import { type ChildPart, noChange, type TemplateResult } from 'lit';
import { AsyncDirective, type DirectiveParameters } from 'lit/async-directive.js';
/**
 * Starts a document view transition and skips it if the user has requested reduced motion.
 */
export declare function startViewTransition(callback: ViewTransitionUpdateCallback): ViewTransition;
/**
 * Starts a scoped view transition on the specified target element and skips it if the user has requested reduced motion.
 */
export declare function startScopedViewTransition(target: HTMLElement, callback: ViewTransitionUpdateCallback): ViewTransition | null;
/**
 * Sets the view transition name for the specified target element.
 */
export declare function setTransitionName(target: HTMLElement, name: string): void;
/**
 * Clears the view transition name for the specified target elements.
 */
export declare function clearTransitionName(...targets: HTMLElement[]): void;
/**
 * Returns the active view transition if one is currently in progress, or null otherwise.
 */
export declare function getActiveViewTransition(): ViewTransition | null;
/**
 * Returns the active scoped view transition for the specified target element if one is currently in progress, or null otherwise.
 */
export declare function getActiveScopedViewTransition(target: Node): ViewTransition | null;
declare class ScopedViewTransitionDirective extends AsyncDirective {
    private _isFirstRender;
    render(template: TemplateResult): TemplateResult;
    update(part: ChildPart, [template]: DirectiveParameters<this>): typeof noChange | TemplateResult;
}
/**
 * A directive that enables scoped view transitions for a template.
 *
 * When applied, it will start a view transition whenever the template is updated,
 * provided that the parent node supports view transitions.
 * If the user has requested reduced motion, the transition will be skipped.
 *
 * @remarks
 * This directive is intended to be used with Lit templates inside a component that supports view transitions.
 * It will not work if the parent node does not support view transitions (e.g., if the parent is not a document or element that implements the ViewTransition interface).
 */
export declare const scopedViewTransition: (template: TemplateResult) => import("lit-html/directive.js").DirectiveResult<typeof ScopedViewTransitionDirective>;
export {};