From be06144532fe75ccd0be5ac19be967fd62e00b2c Mon Sep 17 00:00:00 2001
From: jpaberzs <janis.paberzs18@gmail.com>
Date: Wed, 2 Sep 2026 16:47:43 +0300
Subject: [PATCH] feat: added animations

---
 .../src/app/app.component.ts                  | 39 +++++++++++++++++--
 .../src/app/app.config.ts                     |  3 +-
 2 files changed, 38 insertions(+), 4 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 783b22b91..56e235b23 100644
--- a/apps/angular/46-simple-animations/src/app/app.component.ts
+++ b/apps/angular/46-simple-animations/src/app/app.component.ts
@@ -1,3 +1,11 @@
+import {
+  animate,
+  query,
+  stagger,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
@@ -18,10 +26,35 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       }
     }
   `,
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('slideIn', [
+      transition(':enter', [
+        query('div', [
+          style({ transform: 'translateX(-100vw)' }),
+          stagger(250, [
+            animate('1000ms ease-in', style({ transform: 'translateX(0%)' })),
+          ]),
+        ]),
+      ]),
+    ]),
+    trigger('stagger', [
+      transition(':enter', [
+        query('.list-item', [
+          style({ opacity: 0, transform: 'translateY(100px)' }),
+          stagger(500, [
+            animate(
+              '500ms cubic-bezier(0.35, 0, 0.25, 1)',
+              style({ opacity: 1, transform: 'none' }),
+            ),
+          ]),
+        ]),
+      ]),
+    ]),
+  ],
   template: `
     <div class="mx-20 my-40 flex gap-5">
-      <section>
+      <section @slideIn>
         <div>
           <h3>2008</h3>
           <p>
@@ -53,7 +86,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
         </div>
       </section>
 
-      <section>
+      <section @stagger>
         <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()],
 };