In the layout of my Astro project, I added <html lang="en" transition:name="root" transition:animate="none"> so that the transition animations would be disabled unless I tell it otherwise. It still has a slight fade animation though. Did I do something wrong here?
#View Transitions still having fade although set to none
hardy crane
forest geyser
Hi @hardy crane do you have a repo or a deployment I could have a look at?
The html you how should indeed prevent all view transition animations.
hardy crane
I could upload it to GitHub if that’s okay?
https://github.com/itsfinniii/astro-issue/tree/main/astro-website
I used to use Bun for this project but switched to npm. There might be a couple of things left over. No clue if it would build for you considering I have started adding my CMS to the project, but I am sure the / homepage and /now/ now page should work.
umbral zodiac
Are you testing in Firefox?
hardy crane
Are you testing in Firefox?
The issue occours in Safari and in Brave
umbral zodiac
Ah
hardy crane
I have a feeling it is because of the thing between the blog posts and the index of the blog posts
forest geyser
but I am sure the / homepage and /now/ now page should work.
I'm not so sure.
hardy crane
> but I am sure the / homepage and /now/ now page should work.
I'm not so sure.
Hi, my apologies, I should have fixed this issue.
Please fetch the main branch for the fix.
forest geyser
yup, now it works. Tested with Chrome on Windows: no fade, no animations.
Brave is a Chromium browser? In developer tools, there should be an "Animations" tab. Click the pause symbol and then start a navigation.
If there are (view transition) animations, the browser should stop now and you should be able to see the ::view-transition pseudo-elements hanging off the <html> element in the "Elements" view.
In Chrome, I do not see such elements. No view transitions, no cross fade.
hardy crane
I just tried it again, Homepage and Now don't have the issue, Blogs does...
forest geyser
what navigation should i check?
forest geyser
pleae tell me on which page to start and where to go. I do not want to guess.
hardy crane
It should be between any page and the blogs (from the navigation), but as blogs has data from my CMS, I'll quickly change the index page for blogs to some demo data.
hardy crane
Of course, thanks for helping me, and my apologies for the issues so far.
hardy crane
@forest geyser should be fixed on the main branch again.
forest geyser
👋 @hardy crane you can have several view transition groups on a page. Your definition on the <html> cancels the main group.
But when you search for 'transition:' in your project, you will find transition:animate="fade"in BlogPostIndexItem and in the blog items.
This leads to additional view transition groups for the images.
hardy crane
The ones with the BlogPostIndexItem and the pages for the posts are meant to be animated.
hardy crane
Okay, I just watched a short YouTube tutorial and see my mistake, thank you!
forest geyser
Would you mind sharing the information so it could help others?