Issue with View Transition API
Good morning everyone.
For a few days I have been trying, without success, to implement a page transition (different pages, MPA) using the view transition API, only with CSS. The idea is to animate a div in its scaleY property, changing from 0 to 1, when exiting the page and from 1 to 0 when entering the new page.
This div, positioned absolutely, is placed on top of the content of the page, working as a sort of curtain. I studied the theory of API, asked various AIs, checked browser compatibility, etc. but nothing. It doesn't work.
Can anyone help me?
At the following link there is a simple live demo with the code I hypothesized.
https://deep-grove-135314.wp1.sh/index.html
Thank in advance.
3 Replies
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
StackBlitz | Instant Dev Environments | Click. Code. Done.
StackBlitz is the collaborative browser-based IDE for web developers. StackBlitz eliminates time-consuming local configuration and lets developers spend more time building.
@CuriousMissFox there's a live link where you can inspect code. There are more then one page, so I can't share on codepen or similar
You can use multiple pages on Stackblitz or scrimba. Providing your code in an environment that someone willing to help can see it all in one place and debug easily instead of digging through the dev tools. It’s part of #how-to-ask-good-questions