From 8d1a0bda25c14eb1bca6a29be33fef432a2295f9 Mon Sep 17 00:00:00 2001 From: thomas Date: Mon, 5 Feb 2024 09:44:37 +0100 Subject: [PATCH] feat: improve documentation --- apps/angular/view-transition/project.json | 4 +- apps/angular/view-transition/src/styles.css | 55 --------------- apps/angular/view-transition/src/styles.scss | 4 ++ challenge-number.json | 4 +- .../challenges/angular/44-view-transition.md | 69 ++++++++++++++++--- 5 files changed, 69 insertions(+), 67 deletions(-) delete mode 100644 apps/angular/view-transition/src/styles.css create mode 100644 apps/angular/view-transition/src/styles.scss diff --git a/apps/angular/view-transition/project.json b/apps/angular/view-transition/project.json index 338da85e1..d0a27fd5f 100644 --- a/apps/angular/view-transition/project.json +++ b/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": { diff --git a/apps/angular/view-transition/src/styles.css b/apps/angular/view-transition/src/styles.css deleted file mode 100644 index 8e4d32249..000000000 --- a/apps/angular/view-transition/src/styles.css +++ /dev/null @@ -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; -} diff --git a/apps/angular/view-transition/src/styles.scss b/apps/angular/view-transition/src/styles.scss new file mode 100644 index 000000000..a90f0749c --- /dev/null +++ b/apps/angular/view-transition/src/styles.scss @@ -0,0 +1,4 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + diff --git a/challenge-number.json b/challenge-number.json index 3f34352da..a48a4f1cb 100644 --- a/challenge-number.json +++ b/challenge-number.json @@ -1,6 +1,6 @@ { "total": 44, "🟢": 16, - "🟠": 121, - "🔴": 207 + "🟠": 120, + "🔴": 208 } diff --git a/docs/src/content/docs/challenges/angular/44-view-transition.md b/docs/src/content/docs/challenges/angular/44-view-transition.md index a3500f64e..04d520759 100644 --- a/docs/src/content/docs/challenges/angular/44-view-transition.md +++ b/docs/src/content/docs/challenges/angular/44-view-transition.md @@ -1,20 +1,73 @@ --- -title: 🟠 View Transition -description: Challenge 44 is about ... +title: 🔴 View Transition +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.