ngx-easy-view-transitions 3.1.2 → 3.3.0

package/fesm2022/ngx-easy-view-transitions.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, RendererFactory2, Directive, Injectable, input, Renderer2, effect, provideAppInitializer } from '@angular/core';
+import { inject, ElementRef, RendererFactory2, Directive, Injectable, input, Renderer2, computed, effect, untracked, provideAppInitializer } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 const none = [];
@@ -7,525 +7,525 @@ const scaleIn = [
     {
         opacity: 0,
         transform: 'scale(0.5)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'scale(1)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const scaleOut = [
     {
         opacity: 1,
         transform: 'scale(1)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'scale(0.5)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const fadeIn = [
     {
         opacity: 0,
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const fadeOut = [
     {
         opacity: 1,
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const fadeInUp = [
     {
         opacity: 0,
         transform: 'translate(0, 100%)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'translate(0, 0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const fadeOutUp = [
     {
         opacity: 1,
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'translate(0, -100%)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const fadeInDown = [
     {
         opacity: 0,
         transform: 'translate(0, -100%)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'translate(0, 0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const fadeOutDown = [
     {
         opacity: 1,
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'translate(0, 100%)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const fadeInRight = [
     {
         opacity: 0,
         transform: 'translate(100%, 0)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'translate(0, 0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const fadeOutRight = [
     {
         opacity: 1,
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'translate(100%, 0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const fadeInLeft = [
     {
         opacity: 0,
         transform: 'translate(-100%, 0)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'translate(0, 0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const fadeOutLeft = [
     {
         opacity: 1,
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'translate(-100%, 0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const flipInX = [
     {
         opacity: 0,
         transform: 'rotateX(90deg)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'rotateX(0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const flipOutX = [
     {
         opacity: 1,
         transform: 'rotateX(0)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'rotateX(90deg)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const flipInY = [
     {
         opacity: 0,
         transform: 'rotateY(90deg)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'rotateY(0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const flipOutY = [
     {
         opacity: 1,
         transform: 'rotateY(0)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'rotateY(90deg)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const rotateIn = [
     {
         opacity: 0,
         transform: 'rotate(-180deg) scale(0.5)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'rotate(0) scale(1)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const rotateOut = [
     {
         opacity: 1,
         transform: 'rotate(0) scale(1)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'rotate(180deg) scale(0.5)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const bounceIn = [
     {
         opacity: 0,
         transform: 'scale(0.3)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'scale(1.05)',
-        offset: 0.6,
+        offset: 0.6
     },
     {
         opacity: 1,
         transform: 'scale(0.95)',
-        offset: 0.8,
+        offset: 0.8
     },
     {
         opacity: 1,
         transform: 'scale(1)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const bounceOut = [
     {
         opacity: 1,
         transform: 'scale(1)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'scale(0.95)',
-        offset: 0.2,
+        offset: 0.2
     },
     {
         opacity: 1,
         transform: 'scale(1.05)',
-        offset: 0.4,
+        offset: 0.4
     },
     {
         opacity: 0,
         transform: 'scale(0.3)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const blurIn = [
     {
         opacity: 0,
         transform: 'scale(1.2)',
         filter: 'blur(20px)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'scale(1)',
         filter: 'blur(0px)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const blurOut = [
     {
         opacity: 1,
         transform: 'scale(1)',
         filter: 'blur(0px)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'scale(0.8)',
         filter: 'blur(20px)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const perspectiveIn = [
     {
         opacity: 0,
         transform: 'perspective(1000px) rotateY(90deg)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'perspective(1000px) rotateY(0deg)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const perspectiveOut = [
     {
         opacity: 1,
         transform: 'perspective(1000px) rotateY(0deg)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'perspective(1000px) rotateY(-90deg)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const skewIn = [
     {
         opacity: 0,
         transform: 'translateX(-100%) skewX(30deg)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'translateX(0) skewX(0deg)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const skewOut = [
     {
         opacity: 1,
         transform: 'translateX(0) skewX(0deg)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'translateX(100%) skewX(-30deg)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const revealCircleIn = [
     {
         clipPath: 'circle(0% at 50% 50%)',
-        offset: 0,
+        offset: 0
     },
     {
         clipPath: 'circle(150% at 50% 50%)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const revealCircleOut = [
     {
         clipPath: 'circle(150% at 50% 50%)',
-        offset: 0,
+        offset: 0
     },
     {
         clipPath: 'circle(0% at 50% 50%)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const parallaxIn = [
     {
         opacity: 0,
         transform: 'translateZ(-300px) scale(2)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'translateZ(0) scale(1)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const parallaxOut = [
     {
         opacity: 1,
         transform: 'translateZ(0) scale(1)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'translateZ(-300px) scale(0.8)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const tiltIn = [
     {
         opacity: 0,
         transform: 'rotate(-15deg) translateY(50%)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'rotate(0) translateY(0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const tiltOut = [
     {
         opacity: 1,
         transform: 'rotate(0) translateY(0)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'rotate(15deg) translateY(-50%)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const glitchIn = [
     {
         opacity: 0,
         transform: 'translate(0, 0)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'translate(-2px, 2px)',
-        offset: 0.2,
+        offset: 0.2
     },
     {
         opacity: 1,
         transform: 'translate(2px, -2px)',
-        offset: 0.4,
+        offset: 0.4
     },
     {
         opacity: 1,
         transform: 'translate(-1px, 1px)',
-        offset: 0.6,
+        offset: 0.6
     },
     {
         opacity: 1,
         transform: 'translate(1px, -1px)',
-        offset: 0.8,
+        offset: 0.8
     },
     {
         opacity: 1,
         transform: 'translate(0, 0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const curtainIn = [
     {
         clipPath: 'inset(0 50% 0 50%)',
-        offset: 0,
+        offset: 0
     },
     {
         clipPath: 'inset(0 0% 0 0%)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const curtainOut = [
     {
         clipPath: 'inset(0 0% 0 0%)',
-        offset: 0,
+        offset: 0
     },
     {
         clipPath: 'inset(0 50% 0 50%)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const depthFlipIn = [
     {
         opacity: 0,
         transform: 'perspective(1200px) rotateX(-90deg) translateZ(-200px)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'perspective(1200px) rotateX(0deg) translateZ(0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const depthFlipOut = [
     {
         opacity: 1,
         transform: 'perspective(1200px) rotateX(0deg) translateZ(0)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'perspective(1200px) rotateX(90deg) translateZ(-200px)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const distortWarpIn = [
     {
         opacity: 0,
         transform: 'skewX(20deg) scale(0.9)',
         filter: 'blur(10px)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'skewX(0deg) scale(1)',
         filter: 'blur(0px)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const distortWarpOut = [
     {
         opacity: 1,
         transform: 'skewX(0deg) scale(1)',
         filter: 'blur(0px)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'skewX(-20deg) scale(0.9)',
         filter: 'blur(10px)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const coverFlipIn = [
     {
         opacity: 0,
         transform: 'perspective(800px) rotateY(-12deg) translateX(-8px)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 1,
         transform: 'perspective(800px) rotateY(0deg) translateX(0)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 const coverFlipOut = [
     {
         opacity: 1,
         transform: 'perspective(800px) rotateY(0deg) translateX(0)',
-        offset: 0,
+        offset: 0
     },
     {
         opacity: 0,
         transform: 'perspective(800px) rotateY(12deg) translateX(8px)',
-        offset: 1,
-    },
+        offset: 1
+    }
 ];
 
 var defaultTransitions = /*#__PURE__*/Object.freeze({
@@ -607,19 +607,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             type: Directive,
             args: [{
                     standalone: true,
-                    selector: '[noTransition]',
+                    selector: '[noTransition]'
                 }]
         }] });
 
 /**@internal*/
-function hashCode(str) {
-    let hash = 0;
-    for (let i = 0, len = str.length; i < len; i++) {
-        const code = str.charCodeAt(i);
-        hash = (hash << 5) - hash + code;
-        hash |= 0; // Convert to 32bit integer
-    }
-    return hash;
+function fnv1aHash(str) {
+    let hash = 2166136261;
+    for (let i = 0; i < str.length; i++) {
+        hash ^= str.charCodeAt(i);
+        hash = Math.imul(hash, 16777619);
+    }
+    return hash >>> 0;
 }
 /**@internal*/
 function isValidCustomIdentValue(value) {
@@ -645,7 +644,7 @@ class KeyframesService {
     }
     setKeyframes(keyframes) {
         const keyframesAsString = JSON.stringify(keyframes);
-        const hashedKeyframes = hashCode(keyframesAsString);
+        const hashedKeyframes = fnv1aHash(keyframesAsString);
         const keyframesName = `keyframes-${hashedKeyframes}`;
         if (this._insertedKeyframes.has(keyframesName))
             return keyframesName;
@@ -685,29 +684,23 @@ class ViewTransitionsService {
         this._renderer = this._rendererFactory.createRenderer(null, null);
         this._document = inject(DOCUMENT);
     }
-    setOutAnimation(outAnimation, transitionName) {
-        const elementId = `view-transition-out-${transitionName}`;
-        const styleElement = this._document.getElementById(elementId) || this._document.createElement('style');
-        styleElement.innerHTML = `
-    ::view-transition-old(${transitionName}){
-      animation: ${outAnimation};
-    }
-    `;
-        styleElement.id = elementId;
-        if (!this._document.getElementById(elementId))
-            this._renderer.appendChild(this._document.head, styleElement);
-    }
-    setInAnimation(inAnimation, transitionName) {
-        const elementId = `view-transition-in-${transitionName}`;
+    setTransition(transitionName, animation, direction) {
+        const elementId = `view-transition-${direction}-${transitionName}`;
+        if (this._document.getElementById(elementId))
+            return;
         const styleElement = this._document.getElementById(elementId) || this._document.createElement('style');
         styleElement.innerHTML = `
-    ::view-transition-new(${transitionName}){
-      animation: ${inAnimation};
+    ::view-transition-${direction === 'in' ? 'new' : 'old'}(${transitionName}){
+      animation-name: ${animation.name};
+      animation-duration: ${animation.duration}ms;
+      animation-delay: ${animation.delay ?? 0}ms;
+      animation-direction: ${animation.reverse ? 'reverse' : 'normal'};
+      animation-fill-mode: ${animation.fillMode ?? 'none'};
+      animation-timing-function: ${animation.timingFunction ?? 'ease'};
     }
     `;
         styleElement.id = elementId;
-        if (!this._document.getElementById(elementId))
-            this._renderer.appendChild(this._document.head, styleElement);
+        this._renderer.appendChild(this._document.head, styleElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ViewTransitionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ViewTransitionsService, providedIn: 'root' }); }
@@ -725,7 +718,7 @@ class TransitionNameDirective {
         /**
          * Set the `view-transition-name` property to assign transitions to that element
          */
-        this.transitionName = input.required(...(ngDevMode ? [{ debugName: "transitionName" }] : []));
+        this.originalTransitionName = input.required({ ...(ngDevMode ? { debugName: "originalTransitionName" } : {}), alias: 'transitionName' });
         /**
          * Configure the animation when the element enters the view
          */
@@ -734,60 +727,86 @@ class TransitionNameDirective {
          * Configure the animation when the element leaves the view
          */
         this.outAnimation = input(...(ngDevMode ? [undefined, { debugName: "outAnimation" }] : []));
+        /**
+         * Whether to keep the original transition name or apply hashing for CSS safety.
+         * Defaults to `false`. Set to `true` to use the name as provided without hashing.
+         */
+        this.preserveName = input(false, ...(ngDevMode ? [{ debugName: "preserveName" }] : []));
+        /**
+         * Whether to show the `data-original-view-transition-name` containing the provided transition name. Useful for debugging when hashing is enabled. Defaults to `false`.
+         */
+        this.showOriginalNameAttr = input(false, ...(ngDevMode ? [{ debugName: "showOriginalNameAttr" }] : []));
         this._el = inject(ElementRef);
         this._renderer = inject(Renderer2);
         this._keyframesService = inject(KeyframesService);
         this._viewTransitionsService = inject(ViewTransitionsService);
+        this._transitionName = computed(() => {
+            const originalTransitionName = this.originalTransitionName();
+            return this.preserveName() ? originalTransitionName : `vtn-${fnv1aHash(originalTransitionName)}`;
+        }, ...(ngDevMode ? [{ debugName: "_transitionName" }] : []));
         //transitionName
         effect(() => {
-            const transitionName = this.transitionName();
-            this._renderer.setStyle(this._el.nativeElement, 'view-transition-name', transitionName);
+            this._renderer.setStyle(this._el.nativeElement, 'view-transition-name', this._transitionName());
+        });
+        //originalNameAttr
+        effect(() => {
             queueMicrotask(() => {
-                if (!isValidViewTransitionName(transitionName))
-                    console.warn(`The transition name "${transitionName}" is potentially invalid. Please use a valid CSS <custom-ident> value and avoid forbidden values like "unset", "initial", "inherit" and "none".`);
+                if (this.showOriginalNameAttr()) {
+                    this._renderer.setAttribute(this._el.nativeElement, 'data-original-view-transition-name', untracked(this.originalTransitionName));
+                }
+            });
+        });
+        //warn if invalid transition name
+        effect(() => {
+            queueMicrotask(() => {
+                if (!this.preserveName())
+                    return;
+                const transitionName = this._transitionName();
+                if (isValidViewTransitionName(transitionName))
+                    return;
+                console.warn(`The provided transition name "${transitionName}" is potentially invalid. Please use a valid CSS <custom-ident> value and avoid forbidden values like "unset", "initial", "inherit" and "none". Or use hashing by setting "preserveName" to false.`);
             });
         });
         //inAnimation
         effect(async () => {
-            const inAnimation = this.inAnimation();
-            if (!inAnimation)
+            const animation = this.inAnimation();
+            if (!animation)
                 return;
-            if ('keyframesName' in inAnimation) {
-                const animation = inAnimation;
-                this._viewTransitionsService.setInAnimation(`${animation.duration}ms ${animation.keyframesName} ${animation.reverse ? 'reverse' : ''}`, this.transitionName());
-            }
-            if ('keyframes' in inAnimation) {
-                const animation = inAnimation;
-                const keyframesName = this._keyframesService.setKeyframes(animation.keyframes);
-                this._viewTransitionsService.setInAnimation(`${animation.duration}ms ${keyframesName} ${animation.reverse ? 'reverse' : ''}`, this.transitionName());
-            }
+            this.setTransition(this._transitionName(), animation, 'in');
         });
         //outAnimation
         effect(async () => {
-            const outAnimation = this.outAnimation();
-            if (!outAnimation)
+            const animation = this.outAnimation();
+            if (!animation)
                 return;
-            if ('keyframesName' in outAnimation) {
-                const animation = outAnimation;
-                this._viewTransitionsService.setOutAnimation(`${animation.duration}ms ${animation.keyframesName} ${animation.reverse ? 'reverse' : ''}`, this.transitionName());
-            }
-            if ('keyframes' in outAnimation) {
-                const animation = outAnimation;
-                const keyframesName = this._keyframesService.setKeyframes(animation.keyframes);
-                this._viewTransitionsService.setOutAnimation(`${animation.duration}ms ${keyframesName} ${animation.reverse ? 'reverse' : ''}`, this.transitionName());
-            }
+            this.setTransition(this._transitionName(), animation, 'out');
         });
     }
+    setTransition(transitionName, transition, direction) {
+        let animationName = null;
+        if ('keyframesName' in transition) {
+            animationName = transition.keyframesName;
+        }
+        if ('keyframes' in transition) {
+            animationName = this._keyframesService.setKeyframes(transition.keyframes);
+        }
+        if (!animationName)
+            return;
+        this._viewTransitionsService.setTransition(transitionName, {
+            name: animationName,
+            ...transition
+        }, direction);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TransitionNameDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TransitionNameDirective, isStandalone: true, selector: "[transitionName]", inputs: { transitionName: { classPropertyName: "transitionName", publicName: "transitionName", isSignal: true, isRequired: true, transformFunction: null }, inAnimation: { classPropertyName: "inAnimation", publicName: "inAnimation", isSignal: true, isRequired: false, transformFunction: null }, outAnimation: { classPropertyName: "outAnimation", publicName: "outAnimation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TransitionNameDirective, isStandalone: true, selector: "[transitionName]", inputs: { originalTransitionName: { classPropertyName: "originalTransitionName", publicName: "transitionName", isSignal: true, isRequired: true, transformFunction: null }, inAnimation: { classPropertyName: "inAnimation", publicName: "inAnimation", isSignal: true, isRequired: false, transformFunction: null }, outAnimation: { classPropertyName: "outAnimation", publicName: "outAnimation", isSignal: true, isRequired: false, transformFunction: null }, preserveName: { classPropertyName: "preserveName", publicName: "preserveName", isSignal: true, isRequired: false, transformFunction: null }, showOriginalNameAttr: { classPropertyName: "showOriginalNameAttr", publicName: "showOriginalNameAttr", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TransitionNameDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
-                    selector: '[transitionName]',
+                    selector: '[transitionName]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { transitionName: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionName", required: true }] }], inAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "inAnimation", required: false }] }], outAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "outAnimation", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { originalTransitionName: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionName", required: true }] }], inAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "inAnimation", required: false }] }], outAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "outAnimation", required: false }] }], preserveName: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveName", required: false }] }], showOriginalNameAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOriginalNameAttr", required: false }] }] } });
 
 /**
  * Override the default View Transition API cross-fade animation
@@ -795,25 +814,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
  * @param outAnimation
  */
 function provideDefaultViewTransition(inAnimation, outAnimation) {
-    const factory = (viewTransitionService, keyframesService) => {
-        return () => {
-            if ('keyframesName' in inAnimation) {
-                const animation = inAnimation;
-                viewTransitionService.setInAnimation(`${animation.duration}ms ${animation.keyframesName} ${animation.reverse ? 'reverse' : ''}`, 'root');
+    const factory = (viewTransitionsService, keyframesService) => {
+        const setTransition = (transitionName, transition, direction) => {
+            let animationName = null;
+            if ('keyframesName' in transition) {
+                animationName = transition.keyframesName;
             }
-            if ('keyframes' in inAnimation) {
-                const animation = inAnimation;
-                const keyframesName = keyframesService.setKeyframes(animation.keyframes);
-                viewTransitionService.setInAnimation(`${animation.duration}ms ${keyframesName} ${animation.reverse ? 'reverse' : ''}`, 'root');
+            if ('keyframes' in transition) {
+                animationName = keyframesService.setKeyframes(transition.keyframes);
             }
-            if ('keyframesName' in outAnimation) {
-                const animation = outAnimation;
-                viewTransitionService.setOutAnimation(`${animation.duration}ms ${animation.keyframesName} ${animation.reverse ? 'reverse' : ''}`, 'root');
+            if (!animationName)
+                return;
+            viewTransitionsService.setTransition(transitionName, {
+                name: animationName,
+                ...transition
+            }, direction);
+        };
+        return () => {
+            if (inAnimation) {
+                setTransition('root', inAnimation, 'in');
             }
-            if ('keyframes' in outAnimation) {
-                const animation = outAnimation;
-                const keyframesName = keyframesService.setKeyframes(animation.keyframes);
-                viewTransitionService.setOutAnimation(`${animation.duration}ms ${keyframesName} ${animation.reverse ? 'reverse' : ''}`, 'root');
+            if (outAnimation) {
+                setTransition('root', outAnimation, 'out');
             }
         };
     };