igniteui-webcomponents/animations/view-transition.js

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 { noChange } from 'lit';
import { AsyncDirective, directive, } from 'lit/async-directive.js';
import { isFunction } from '../components/common/util.js';
import { getPrefersReducedMotion } from './player.js';
function hasScopedViewTransition(node) {
    return 'startViewTransition' in node && isFunction(node.startViewTransition);
}
export function startViewTransition(callback) {
    const init = globalThis.document?.startViewTransition;
    if (!init) {
        callback();
        const resolved = Promise.resolve();
        return {
            finished: resolved,
            ready: resolved,
            updateCallbackDone: resolved,
            skipTransition: () => { },
        };
    }
    const transition = init.call(globalThis.document, callback);
    if (getPrefersReducedMotion()) {
        transition.skipTransition();
    }
    return transition;
}
export function startScopedViewTransition(target, callback) {
    if (!hasScopedViewTransition(target)) {
        return null;
    }
    const transition = target.startViewTransition(callback);
    if (getPrefersReducedMotion()) {
        transition.skipTransition();
    }
    return transition;
}
export function setTransitionName(target, name) {
    target.style.viewTransitionName = name;
}
export function clearTransitionName(...targets) {
    for (const target of targets) {
        target.style.viewTransitionName = '';
    }
}
export function getActiveViewTransition() {
    return globalThis.document?.activeViewTransition ?? null;
}
export function getActiveScopedViewTransition(target) {
    if (!hasScopedViewTransition(target)) {
        return null;
    }
    return target.activeViewTransition ?? null;
}
class ScopedViewTransitionDirective extends AsyncDirective {
    constructor() {
        super(...arguments);
        this._isFirstRender = true;
    }
    render(template) {
        return template;
    }
    update(part, [template]) {
        if (this._isFirstRender) {
            this._isFirstRender = false;
            return this.render(template);
        }
        const parent = part.parentNode;
        if (!hasScopedViewTransition(parent)) {
            return this.render(template);
        }
        const transition = parent.startViewTransition(() => {
            this.setValue(template);
            return new Promise((resolve) => requestAnimationFrame(resolve));
        });
        if (getPrefersReducedMotion()) {
            transition.skipTransition();
        }
        return noChange;
    }
}
export const scopedViewTransition = directive(ScopedViewTransitionDirective);
//# sourceMappingURL=view-transition.js.map