feat(challenge 52): add simple animations to list items

Co-authored-by: Copilot <copilot@github.com>

Author: truonghungit

apps/angular/46-simple-animations/src/app/app.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   imports: [],
   selector: 'app-root',
   styles: `
-@reference "tailwindcss";
+    @reference "tailwindcss";
 
     section {
       @apply flex flex-1 flex-col gap-5;
@@ -17,10 +17,35 @@ import { Component } from '@angular/core';
         @apply flex-1;
       }
     }
+
+    .enter-animation {
+      animation: slide-fade 1s;
+    }
+
+    @keyframes slide-fade {
+      from {
+        opacity: 0;
+        transform: translateX(-50px);
+      }
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+
+    .list-item {
+      transition-property: opacity, transform;
+      transition-duration: 500ms;
+      transition-delay: calc(200ms * var(--index));
+      @starting-style {
+        opacity: 0;
+        transform: translateX(-10px);
+      }
+    }
   `,
   template: `
     <div class="mx-20 my-40 flex gap-5">
-      <section>
+      <section animate.enter="enter-animation">
         <div>
           <h3>2008</h3>
           <p>
@@ -53,32 +78,32 @@ import { Component } from '@angular/core';
       </section>
 
       <section>
-        <div class="list-item">
+        <div class="list-item" style="--index: 0">
           <span>Name:</span>
           <span>Samuel</span>
         </div>
 
-        <div class="list-item">
+        <div class="list-item" style="--index: 1">
           <span>Age:</span>
           <span>28</span>
         </div>
 
-        <div class="list-item">
+        <div class="list-item" style="--index: 2">
           <span>Birthdate:</span>
           <span>02.11.1995</span>
         </div>
 
-        <div class="list-item">
+        <div class="list-item" style="--index: 3">
           <span>City:</span>
           <span>Berlin</span>
         </div>
 
-        <div class="list-item">
+        <div class="list-item" style="--index: 4">
           <span>Language:</span>
           <span>English</span>
         </div>
 
-        <div class="list-item">
+        <div class="list-item" style="--index: 5">
           <span>Like Pizza:</span>
           <span>Hell yeah</span>
         </div>