From 26aaebe4b1b4967ed4ab4cd50a36fb78a9725b9b Mon Sep 17 00:00:00 2001
From: Michal Grzegorczyk <michalgrzegorczyk.dev@gmail.com>
Date: Sun, 17 Nov 2024 19:53:24 +0100
Subject: [PATCH] feat: add simple animations

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

diff --git a/apps/angular/46-simple-animations/src/app/app.animations.ts b/apps/angular/46-simple-animations/src/app/app.animations.ts
new file mode 100644
index 000000000..408de3d91
--- /dev/null
+++ b/apps/angular/46-simple-animations/src/app/app.animations.ts
@@ -0,0 +1,44 @@
+import {
+  animate,
+  query,
+  stagger,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+
+export const fadeInFromLeft = trigger('fadeInFromLeft', [
+  transition(':enter', [
+    style({
+      opacity: 0,
+      transform: 'translateX(-100%)',
+    }),
+    animate(
+      '500ms ease-out',
+      style({
+        opacity: 1,
+        transform: 'translateX(0)',
+      }),
+    ),
+  ]),
+]);
+
+export const listAnimation = trigger('listAnimation', [
+  transition(':enter', [
+    query('.list-item', [
+      style({
+        opacity: 0,
+        transform: 'translateX(-50px)',
+      }),
+      stagger(100, [
+        animate(
+          '300ms ease-out',
+          style({
+            opacity: 1,
+            transform: 'translateX(0)',
+          }),
+        ),
+      ]),
+    ]),
+  ]),
+]);
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 9f537b3fb..9ab1dd6a3 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,10 @@
 import { Component } from '@angular/core';
+import { fadeInFromLeft, listAnimation } from './app.animations';
 
 @Component({
   standalone: true,
-  imports: [],
   selector: 'app-root',
+  animations: [fadeInFromLeft, listAnimation],
   styles: `
     section {
       @apply flex flex-1 flex-col gap-5;
@@ -19,7 +20,7 @@ import { Component } from '@angular/core';
   `,
   template: `
     <div class="mx-20 my-40 flex gap-5">
-      <section>
+      <section [@fadeInFromLeft]>
         <div>
           <h3>2008</h3>
           <p>
@@ -51,7 +52,7 @@ import { Component } from '@angular/core';
         </div>
       </section>
 
-      <section>
+      <section [@listAnimation]>
         <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..a536127b6 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 { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
-  providers: [],
+  providers: [provideAnimationsAsync()],
 };