feat: improve documentation

apps/angular/view-transition/project.json

@@ -15,12 +15,12 @@
         "browser": "apps/angular/view-transition/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/angular/view-transition/tsconfig.app.json",
-        "inlineStyleLanguage": "css",
+        "inlineStyleLanguage": "scss",
         "assets": [
           "apps/angular/view-transition/src/favicon.ico",
           "apps/angular/view-transition/src/assets"
         ],
-        "styles": ["apps/angular/view-transition/src/styles.css"],
+        "styles": ["apps/angular/view-transition/src/styles.scss"],
         "scripts": []
       },
       "configurations": {

apps/angular/view-transition/src/styles.css

@@ -1,55 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-}
-
-@keyframes fade-out {
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes slide-from-right {
-  from {
-    transform: translateX(30px);
-  }
-}
-
-@keyframes slide-to-left {
-  to {
-    transform: translateX(-30px);
-  }
-}
-
-::view-transition-old(root) {
-  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
-  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
-}
-
-::view-transition-new(root) {
-  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
-  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-::view-transition-new(count) {
-  animation: rotate 2s linear;
-}
-
-::view-transition-old(count) {
-  animation: rotate 0.5s linear;
-}

apps/angular/view-transition/src/styles.scss

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

challenge-number.json

@@ -1,6 +1,6 @@
 {
   "total": 44,
   "🟢": 16,
-  "🟠": 121,
+  "🟠": 120,
-  "🔴": 207
+  "🔴": 208
 }

docs/src/content/docs/challenges/angular/44-view-transition.md

@@ -1,20 +1,73 @@
 ---
-title: 🟠 View Transition
+title: 🔴 View Transition
-description: Challenge 44 is about ...
+description: Challenge 44 is about learning the new view transition animation API
 author: thomas-laforge
 challengeNumber: 44
 command: angular-view-transition
 sidebar:
-  order: 121
+  order: 208
   badge: New
 ---
 
-:::note
-WIP: The following documentation need to be written.
-:::
-
 ## Information
 
+The View Transition API is a brand new API that provides a set of features that allow developers to control and manipulate the transitions and animations between views within an application.
+It plays a pivotal role in enhancing user experience (UX), bringing applications to life with engaging and captivating transitions to guide users through different pages or sections of the app.
+
+The goal of this challenge is to learn about and manipulate all types of transitions proposed by the API.
+
+To use the API, Angular provides a function `withViewTransitions()` that needs to be injected inside the router config.
+
+I would advise you to read the [Chrome documentation](https://developer.chrome.com/docs/web-platform/view-transitions). You will learn everything necessary to successfully complete the challenge.
+
+Here, however, is a short summary:
+Firstly, each target DOM element has two states; an `old` one when the element is leaving the page, and a `new` one when it's entering the page:
+
+```css
+::view-transition-old(root) {
+/ / animation
+}
+
+::view-transition-new(root) {
+/ / animation
+}
+```
+
+In order to target a specific element, you must add the selector `view-transition-name` to a CSS class on the DOM node, as shown below:
+
+```css
+.specific-element {
+  view-transition-name: specific-element;
+}
+```
+
+This allows you to create an animation for this element only.
+
+Lastly, if the same element is present in both views, you can automate the transition by assigning the same **transition name**.
+
+:::danger
+Remenber, you can have only ONE UNIQUE `view-transition-name` per page.
+:::
+
 ## Statement
 
-## Constraints
+The goal of this challenge is to transition from the state shown in this video:
+
+To the final state shown in the following video:
+
+Observe the following:
+
+- The header slides in and out
+- Each element smoothly transitions to its new location
+
+### Level 1
+
+Focus only on the first thumbnail and create a seamless and pleasing transition
+
+### Level 2
+
+Create the same appealing transition for all thumbnails without duplicating the `view-transition-name`. Note that this page has only 3 thumbnails; in a real-life scenario, you could have significantly more.
+
+### Level 3
+
+Shift to the correct Y location when navigating back and forth.