From 2d95811a6c5dc5af1e9745863c14dd2de1876ab3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n?= <rubensedeno@gmail.com>
Date: Thu, 15 May 2025 09:38:47 +0200
Subject: [PATCH 1/2] feat(challenge 46): angular-simple-animations no SCSS

---
 .../src/app/animations.ts                     | 38 +++++++++++++++++++
 .../src/app/app.component.ts                  |  7 ++--
 .../src/app/app.config.ts                     |  3 +-
 3 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 apps/angular/46-simple-animations/src/app/animations.ts

diff --git a/apps/angular/46-simple-animations/src/app/animations.ts b/apps/angular/46-simple-animations/src/app/animations.ts
new file mode 100644
index 000000000..d251d9332
--- /dev/null
+++ b/apps/angular/46-simple-animations/src/app/animations.ts
@@ -0,0 +1,38 @@
+import {
+  animate,
+  query,
+  stagger,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+
+export const fadeInAnimation = [
+  trigger('horizontalAnimation', [
+    transition(':enter', [
+      style({ transform: 'translateX(-100%)' }),
+      animate('0.5s ease-in-out', style({ transform: 'translateX(0)' })),
+    ]),
+    transition(':leave', [
+      style({ transform: 'translateX(0)' }),
+      animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' })),
+    ]),
+  ]),
+];
+
+export const staggerAnimation = [
+  trigger('staggerAnimation', [
+    transition(':enter', [
+      query(
+        '.list-item',
+        [
+          style({ opacity: 0, transform: 'translateY(-10px)' }),
+          stagger(200, [
+            animate('500ms ease-in', style({ opacity: 1, transform: 'none' })),
+          ]),
+        ],
+        { optional: true },
+      ),
+    ]),
+  ]),
+];
diff --git a/apps/angular/46-simple-animations/src/app/app.component.ts b/apps/angular/46-simple-animations/src/app/app.component.ts
index ae63db419..876c36e1d 100644
--- a/apps/angular/46-simple-animations/src/app/app.component.ts
+++ b/apps/angular/46-simple-animations/src/app/app.component.ts
@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
+import { fadeInAnimation, staggerAnimation } from './animations';
 
 @Component({
-  imports: [],
   selector: 'app-root',
+  animations: [fadeInAnimation, staggerAnimation],
   styles: `
     section {
       @apply flex flex-1 flex-col gap-5;
@@ -18,7 +19,7 @@ import { Component } from '@angular/core';
   `,
   template: `
     <div class="mx-20 my-40 flex gap-5">
-      <section>
+      <section @horizontalAnimation>
         <div>
           <h3>2008</h3>
           <p>
@@ -50,7 +51,7 @@ import { Component } from '@angular/core';
         </div>
       </section>
 
-      <section>
+      <section @staggerAnimation>
         <div class="list-item">
           <span>Name:</span>
           <span>Samuel</span>
diff --git a/apps/angular/46-simple-animations/src/app/app.config.ts b/apps/angular/46-simple-animations/src/app/app.config.ts
index 81a6edde4..59198e627 100644
--- a/apps/angular/46-simple-animations/src/app/app.config.ts
+++ b/apps/angular/46-simple-animations/src/app/app.config.ts
@@ -1,5 +1,6 @@
 import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
-  providers: [],
+  providers: [provideAnimations()],
 };

From 07d5ede5b1e80d961c59ad2910b64c1ac2f3e273 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n?= <rubensedeno@gmail.com>
Date: Thu, 15 May 2025 11:47:10 +0200
Subject: [PATCH 2/2] feat(challenge 46): angular-simple-animations with CSS

---
 .../src/app/app.component.ts                  | 76 ++++++++++---------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/apps/angular/46-simple-animations/src/app/app.component.ts b/apps/angular/46-simple-animations/src/app/app.component.ts
index 876c36e1d..bf7dca2fb 100644
--- a/apps/angular/46-simple-animations/src/app/app.component.ts
+++ b/apps/angular/46-simple-animations/src/app/app.component.ts
@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { fadeInAnimation, staggerAnimation } from './animations';
+// import { fadeInAnimation, staggerAnimation } from './animations';
 
 @Component({
   selector: 'app-root',
-  animations: [fadeInAnimation, staggerAnimation],
+  // animations: [fadeInAnimation, staggerAnimation],
   styles: `
     section {
       @apply flex flex-1 flex-col gap-5;
@@ -16,10 +16,31 @@ import { fadeInAnimation, staggerAnimation } from './animations';
         @apply flex-1;
       }
     }
+
+    .list .list-item {
+      transition-property: opacity, transform;
+      transition-duration: 500ms;
+      transition-delay: calc(200ms * var(--index));
+      @starting-style {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+    }
+
+    .fade-in {
+      transition-property: opacity, transform;
+      transition-duration: 500ms;
+      transition-timing-function: ease-in-out;
+      @starting-style {
+        opacity: 0;
+        transform: translateX(-100%);
+      }
+    }
   `,
   template: `
     <div class="mx-20 my-40 flex gap-5">
-      <section @horizontalAnimation>
+      <!-- <section @horizontalAnimation> -->
+      <section class="fade-in">
         <div>
           <h3>2008</h3>
           <p>
@@ -51,38 +72,25 @@ import { fadeInAnimation, staggerAnimation } from './animations';
         </div>
       </section>
 
-      <section @staggerAnimation>
-        <div class="list-item">
-          <span>Name:</span>
-          <span>Samuel</span>
-        </div>
-
-        <div class="list-item">
-          <span>Age:</span>
-          <span>28</span>
-        </div>
-
-        <div class="list-item">
-          <span>Birthdate:</span>
-          <span>02.11.1995</span>
-        </div>
-
-        <div class="list-item">
-          <span>City:</span>
-          <span>Berlin</span>
-        </div>
-
-        <div class="list-item">
-          <span>Language:</span>
-          <span>English</span>
-        </div>
-
-        <div class="list-item">
-          <span>Like Pizza:</span>
-          <span>Hell yeah</span>
-        </div>
+      <!-- <section @staggerAnimation> -->
+      <section class="list">
+        @for (item of list; track item.key; let i = $index) {
+          <div class="list-item" style="--index: {{ i }}">
+            <span>{{ item.key }}</span>
+            <span>{{ item.value }}</span>
+          </div>
+        }
       </section>
     </div>
   `,
 })
-export class AppComponent {}
+export class AppComponent {
+  readonly list: { key: string; value: string }[] = [
+    { key: 'Name', value: 'Samuel' },
+    { key: 'Age', value: '28' },
+    { key: 'Birthdate', value: '02.11.1995' },
+    { key: 'City', value: 'Berlin' },
+    { key: 'Language', value: 'English' },
+    { key: 'Like Pizza', value: 'Hell yeah' },
+  ];
+}