From 50e488c115d5cd30fd93b0bee30bddff7923cb8b Mon Sep 17 00:00:00 2001
From: WhoisBsa <mbscbsjbs@gmail.com>
Date: Wed, 9 Apr 2025 18:21:25 -0300
Subject: [PATCH 1/2] feat: answer:48 simple-animations

---
 .../src/app/app.component.ts                  | 62 ++++++++++++++++---
 .../src/app/app.config.ts                     |  3 +-
 2 files changed, 55 insertions(+), 10 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 ae63db419..dcb05a91d 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,52 @@
+import {
+  animate,
+  animateChild,
+  query,
+  stagger,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
 import { Component } from '@angular/core';
 
 @Component({
-  imports: [],
+  imports: [
+    // BrowserAnimationsModule
+  ],
   selector: 'app-root',
+  animations: [
+    trigger('fadeIn', [
+      transition(':enter', [
+        style({
+          transform: 'translateX(-20%)',
+          opacity: 0,
+        }),
+        animate(
+          '500ms',
+          style({
+            opacity: 1,
+            transform: 'translateX(0%)',
+          }),
+        ),
+      ]),
+    ]),
+
+    trigger('listItem', [
+      transition(':enter', [
+        style({ transform: 'translateX(-10%)', opacity: 0 }),
+        animate(
+          '200ms linear',
+          style({ transform: 'translateX(0%)', opacity: 1 }),
+        ),
+      ]),
+    ]),
+
+    trigger('stagger', [
+      transition(':enter', [
+        query('@listItem', stagger('100ms', animateChild())),
+      ]),
+    ]),
+  ],
   styles: `
     section {
       @apply flex flex-1 flex-col gap-5;
@@ -18,7 +62,7 @@ import { Component } from '@angular/core';
   `,
   template: `
     <div class="mx-20 my-40 flex gap-5">
-      <section>
+      <section @fadeIn>
         <div>
           <h3>2008</h3>
           <p>
@@ -50,33 +94,33 @@ import { Component } from '@angular/core';
         </div>
       </section>
 
-      <section>
-        <div class="list-item">
+      <section @stagger>
+        <div @listItem class="list-item">
           <span>Name:</span>
           <span>Samuel</span>
         </div>
 
-        <div class="list-item">
+        <div @listItem class="list-item">
           <span>Age:</span>
           <span>28</span>
         </div>
 
-        <div class="list-item">
+        <div @listItem class="list-item">
           <span>Birthdate:</span>
           <span>02.11.1995</span>
         </div>
 
-        <div class="list-item">
+        <div @listItem class="list-item">
           <span>City:</span>
           <span>Berlin</span>
         </div>
 
-        <div class="list-item">
+        <div @listItem class="list-item">
           <span>Language:</span>
           <span>English</span>
         </div>
 
-        <div class="list-item">
+        <div @listItem class="list-item">
           <span>Like Pizza:</span>
           <span>Hell yeah</span>
         </div>
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 747a6024b3dd8cad180a35247250501d2978857f Mon Sep 17 00:00:00 2001
From: WhoisBsa <mbscbsjbs@gmail.com>
Date: Wed, 9 Apr 2025 18:35:59 -0300
Subject: [PATCH 2/2] feat: improve animation logic

---
 .../src/app/app.component.ts                  | 33 +++++++++----------
 1 file changed, 15 insertions(+), 18 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 dcb05a91d..30446142d 100644
--- a/apps/angular/46-simple-animations/src/app/app.component.ts
+++ b/apps/angular/46-simple-animations/src/app/app.component.ts
@@ -1,6 +1,5 @@
 import {
   animate,
-  animateChild,
   query,
   stagger,
   style,
@@ -31,19 +30,17 @@ import { Component } from '@angular/core';
       ]),
     ]),
 
-    trigger('listItem', [
-      transition(':enter', [
-        style({ transform: 'translateX(-10%)', opacity: 0 }),
-        animate(
-          '200ms linear',
-          style({ transform: 'translateX(0%)', opacity: 1 }),
-        ),
-      ]),
-    ]),
-
     trigger('stagger', [
       transition(':enter', [
-        query('@listItem', stagger('100ms', animateChild())),
+        query('.list-item', [
+          style({ transform: 'translateX(-10%)', opacity: 0 }),
+          stagger(100, [
+            animate(
+              '200ms linear',
+              style({ opacity: 1, transform: 'translateX(0)' }),
+            ),
+          ]),
+        ]),
       ]),
     ]),
   ],
@@ -95,32 +92,32 @@ import { Component } from '@angular/core';
       </section>
 
       <section @stagger>
-        <div @listItem class="list-item">
+        <div class="list-item">
           <span>Name:</span>
           <span>Samuel</span>
         </div>
 
-        <div @listItem class="list-item">
+        <div class="list-item">
           <span>Age:</span>
           <span>28</span>
         </div>
 
-        <div @listItem class="list-item">
+        <div class="list-item">
           <span>Birthdate:</span>
           <span>02.11.1995</span>
         </div>
 
-        <div @listItem class="list-item">
+        <div class="list-item">
           <span>City:</span>
           <span>Berlin</span>
         </div>
 
-        <div @listItem class="list-item">
+        <div class="list-item">
           <span>Language:</span>
           <span>English</span>
         </div>
 
-        <div @listItem class="list-item">
+        <div class="list-item">
           <span>Like Pizza:</span>
           <span>Hell yeah</span>
         </div>