added animations

src/app/app.config.ts

@@ -1,6 +1,5 @@
 import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
+import { provideRouter, withViewTransitions } from '@angular/router';
 import { routes } from './app.routes';
 import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { getFirestore, provideFirestore } from '@angular/fire/firestore';
@@ -31,7 +30,7 @@ export const appConfig: ApplicationConfig = {
       })
     ),
     provideHttpClient(),
-    provideRouter(routes),
+    provideRouter(routes, withViewTransitions()),
     importProvidersFrom(
       provideFirebaseApp(() =>
         initializeApp({

src/app/components/contacts/contact-detail/contact-detail.component.html

@@ -4,7 +4,8 @@
     <div class="blue-bar"></div>
     <div class="metrics-txt">Better with a team</div>
   </div>
-  <div class="content">
+  @if (paramsId) {
+  <div>
     <div class="header">
       <div
         class="circle"
@@ -47,4 +48,5 @@
       </div>
     </div>
   </div>
+  }
 </section>

src/app/components/contacts/contact-detail/contact-detail.component.scss

@@ -93,6 +93,26 @@ section {
   }
 }
 
+/* Custom transition */
+@keyframes rotate-out {
+  to {
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-in {
+  from {
+    transform: rotate(-90deg);
+  }
+}
+::view-transition-old(count),
+::view-transition-new(count) {
+  animation-duration: 200ms;
+  animation-name: -ua-view-transition-fade-in, rotate-in;
+}
+::view-transition-old(count) {
+  animation-name: -ua-view-transition-fade-out, rotate-out;
+}
+
 @media screen and (max-width: 1300px) {
   .headerline {
     .title {

src/app/components/contacts/contacts.component.html

@@ -68,7 +68,5 @@
       } }
     </div>
   </div>
-  @if (paramsId) {
   <app-contact-detail></app-contact-detail>
-  }
 </section>

src/app/module/animation.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+@NgModule({
+  imports: [BrowserAnimationsModule],
+  exports: [BrowserAnimationsModule],
+})
+export class MyAnimationsModule {}