vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #566 from jdegand/view-transition-typos

Browse Source 
fix: view transition typos
This commit is contained in:
Laforge Thomas
2024-02-07 14:51:49 +01:00
committed by GitHub
parent 107395e856 3ec53b3ad4
commit 77ead59094
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,16 +12,16 @@ sidebar:
## 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.
It plays a pivotal role in enhancing the 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.
I would advise you to read the [Chrome documentation](https://developer.chrome.com/docs/web-platform/view-transitions). You will learn everything that is 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:
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) {
@@ -46,7 +46,7 @@ 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.
Remember, you can have only ONE UNIQUE `view-transition-name` per page.
:::
## Statement
@@ -63,12 +63,12 @@ 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
- 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
Focus only on the first thumbnail and create a seamless and pleasing transition.
### Level 2