update

src/app/app.routes.ts

@@ -1,10 +1,10 @@
 import {Routes} from '@angular/router';
 import {DetailComponent} from './pages/detail/detail.component';
 import {EditorComponent} from './pages/editor/editor.component';
-import {ProfileComponent} from './pages/profile/profile.component';
+import {ListComponent} from './pages/list/list.component';
 
 export const routes: Routes = [
-  {path: ':userid', component: ProfileComponent},
+  {path: ':userid', component: ListComponent},
   {path: ':userid/detail/:id', component: DetailComponent},
   {path: ':userid/editor/:id', component: EditorComponent},
   {path: '', redirectTo: 'konstantindenerz', pathMatch: 'full'},

src/app/pages/detail/detail.component.scss

@@ -203,45 +203,38 @@ labs-project-preview {
 
   .special & {
     view-transition-name: special;
-    contain: layout;
   }
 
   &.full-page-transition {
     view-transition-name: detail-page;
-    contain: layout;
   }
 
   body:not(.special) & {
     &:not(.full-page-transition) {
       .preview {
         labs-project-preview {
-          view-transition-name: project-preview;
-          contain: layout;
+          view-transition-name: preview;
         }
       }
 
       .content {
         view-transition-name: detail-content;
-        contain: layout;
       }
 
       .left {
         .top {
           labs-icon-button {
             view-transition-name: back-button;
-            contain: layout;
           }
         }
       }
 
       .author {
         view-transition-name: author;
-        contain: layout;
       }
 
       .title {
         view-transition-name: project-title;
-        contain: layout;
       }
     }
   }

src/app/pages/detail/detail.component.ts

@@ -1,5 +1,5 @@
 import {CommonModule} from '@angular/common';
-import {Component, ElementRef, inject, Input, NgZone, OnInit} from '@angular/core';
+import {Component, ElementRef, inject, Input, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {faHeart} from '@fortawesome/free-solid-svg-icons';
 import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
@@ -28,11 +28,11 @@ export class DetailComponent implements OnInit {
   play = faPlay;
   private readonly router = inject(Router);
   public readonly activatedRoute = inject(ActivatedRoute);
-  private readonly ngZone = inject(NgZone);
   private readonly elementRef = inject(ElementRef);
   private readonly dataService = inject(DataService);
   public project?: Project;
   @Input() id = '';
+
   navigate() {
     void this.router.navigateByUrl(`/konstantindenerz/editor/${this.id}`);
   }

src/app/pages/editor/editor.component.scss

@@ -133,39 +133,39 @@ labs-project-preview {
 
   body.special & {
     view-transition-name: special;
-    contain: layout;
+
   }
 
   body:not(.special) & {
     &:not(.full-page-transition) {
       .code {
         view-transition-name: code;
-        contain: layout;
+
       }
 
       .left {
         .top {
           labs-icon-button {
             z-index: 1;
             view-transition-name: back-button;
-            contain: layout;
+
           }
         }
       }
 
       .author {
         view-transition-name: author;
-        contain: layout;
+
       }
 
       .title {
         view-transition-name: project-title;
-        contain: layout;
+
       }
 
       labs-project-preview {
-        view-transition-name: project-preview;
-        contain: layout;
+        view-transition-name: preview;
+
       }
     }
   }

src/app/pages/editor/editor.component.ts

@@ -1,6 +1,6 @@
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {CommonModule} from '@angular/common';
-import {Component, inject, Input, NgZone, OnInit} from '@angular/core';
+import {Component, inject, Input, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {faArrowLeft} from '@fortawesome/free-solid-svg-icons/faArrowLeft';
 import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';

src/app/pages/profile/profile.component.ts → src/app/pages/list/list.component.ts

@@ -8,12 +8,12 @@ import {DataService} from '../../shared/data-service';
 import {RippleDirective} from '../../ui/ripple/ripple.directive';
 
 @Component({
-  selector: 'labs-profile',
+  selector: 'labs-list',
   standalone: true,
   imports: [CommonModule, RouterLinkActive, RippleDirective, ProjectCardComponent, ProjectPreviewComponent],
-  templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss'],
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss'],
 })
-export class ProfileComponent {
+export class ListComponent {
   projects: Project[] = inject(DataService).data;
 }

src/app/project/project-card/project-card.component.scss

@@ -78,8 +78,7 @@
   &.active {
     .preview {
       labs-project-preview {
-        view-transition-name: project-preview;
-        contain: layout;
+        view-transition-name: preview;
       }
     }
   }

src/app/project/project-card/project-card.component.ts

@@ -29,6 +29,5 @@ export class ProjectCardComponent {
   async nav(segments: string[]): Promise<void> {
     this.elementRef.nativeElement.classList.add('active');
     await this.router.navigate(segments);
-    this.elementRef.nativeElement.classList.add('active');
   }
 }

src/app/project/project-preview/project-preview.component.ts

@@ -2,6 +2,10 @@ import {CommonModule} from '@angular/common';
 import {Component, ElementRef, inject, Input, OnChanges, SimpleChanges} from '@angular/core';
 import {ViewTransitionCacheService} from '../../view-transition/view-transition-cache.service';
 
+export const videoFactory = (id: string) => `
+<video muted autoplay loop src="assets/${id}.mp4?v2"></video>
+`;
+
 @Component({
   selector: 'labs-project-preview',
   standalone: true,
@@ -11,20 +15,20 @@ import {ViewTransitionCacheService} from '../../view-transition/view-transition-
 })
 export class ProjectPreviewComponent implements OnChanges {
   @Input({required: true}) id = '';
-  private readonly viewTransitionCacheService = inject(ViewTransitionCacheService);
+  private readonly cache = inject(ViewTransitionCacheService);
   private readonly elementRef = inject(ElementRef);
 
   async ngOnChanges(changes: SimpleChanges): Promise<void> {
     const {nativeElement} = this.elementRef;
-    if (this.viewTransitionCacheService.has(this.id)) {
-      const video = this.viewTransitionCacheService.get(this.id) as HTMLVideoElement;
+    if (this.cache.has(this.id)) {
+      const video = this.cache.get(this.id) as HTMLVideoElement;
       await video.play();
       nativeElement.append(video);
     } else {
-      nativeElement.innerHTML = `<video muted autoplay loop src="assets/${this.id}.mp4?v2"></video>`;
+      nativeElement.innerHTML = videoFactory(this.id);
       const element = nativeElement.children[0] as HTMLElement;
       this.elementRef.nativeElement.appendChild(element);
-      this.viewTransitionCacheService.set(this.id, element);
+      this.cache.set(this.id, element);
     }
   }
 }

src/app/ui/app-bar/app-bar.component.scss

@@ -94,7 +94,7 @@
   border-bottom-left-radius: var(--md-sys-size-5);
   border-bottom-right-radius: var(--md-sys-size-5);
   view-transition-name: app-bar;
-  contain: layout;
+
 
   &:after {
     content: '';

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>🅰️ngular - View Transition ✨ Demo</title>
+  <title>✨View Transitions & Angular Demo</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/styles.scss

@@ -19,6 +19,7 @@
   --md-sys-size-10: 3rem;
   --md-sys-size-11: 3.5rem;
   --view-transition-duration: .5s;
+  --index-preview: 10000;
 }
 
 /* You can add global styles to this file, and also import other style files */

src/styles/view-transitions/detail.component.transitions.scss

@@ -44,11 +44,12 @@
   }
 }
 
-::view-transition-new(back-button):only-child {
+::view-transition-new(author):only-child {
   animation: slide-in-from-left var(--view-transition-duration) ease;
 }
 
-::view-transition-new(author):only-child {
+
+::view-transition-new(back-button):only-child {
   animation: slide-in-from-left var(--view-transition-duration) ease;
 }
 

src/styles/view-transitions/project-card.component.transitions.scss

@@ -1,9 +1,9 @@
-::view-transition-old(project-preview) {
+::view-transition-old(preview) {
   display: none;
 }
 
 
-::view-transition-new(project-preview) {
+::view-transition-new(preview) {
   animation: none;
-  z-index: 111111;
+  z-index: var(--index-preview);
 }