From d7819f732e0e50fa93cf733c26d58fb5f8c80072 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Wed, 27 Mar 2024 17:33:15 +0100
Subject: [PATCH] added animations

---
 src/app/app.config.ts                         |  5 ++---
 .../contact-detail.component.html             |  4 +++-
 .../contact-detail.component.scss             | 20 +++++++++++++++++++
 .../contacts/contacts.component.html          |  2 --
 src/app/module/animation.module.ts            |  8 ++++++++
 5 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 src/app/module/animation.module.ts

diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index ff16552..23b124d 100644
--- a/src/app/app.config.ts
+++ b/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({
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.html b/src/app/components/contacts/contact-detail/contact-detail.component.html
index 2710805..b3d643b 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.html
+++ b/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>
diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.scss b/src/app/components/contacts/contact-detail/contact-detail.component.scss
index d60d374..01a45e8 100644
--- a/src/app/components/contacts/contact-detail/contact-detail.component.scss
+++ b/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 {
diff --git a/src/app/components/contacts/contacts.component.html b/src/app/components/contacts/contacts.component.html
index 6c7f3fb..c046464 100644
--- a/src/app/components/contacts/contacts.component.html
+++ b/src/app/components/contacts/contacts.component.html
@@ -68,7 +68,5 @@
       } }
     </div>
   </div>
-  @if (paramsId) {
   <app-contact-detail></app-contact-detail>
-  }
 </section>
diff --git a/src/app/module/animation.module.ts b/src/app/module/animation.module.ts
new file mode 100644
index 0000000..b4decf7
--- /dev/null
+++ b/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 {}