#Am I noob or its ViewTransitions bugged?

16 messages · Page 1 of 1 (latest)

reef shore
#

Im using astro 4.4.0, Tailwind 5.1.0 and vue 3.4.19. I cannot use make the transition working as they should. My project is structured like this:

index
about
blog folder:
--indexBlog

I have a single layout that is used these 3 pages.
This layout contains the head with the viewtransition directive. And the header vuejs component, which is basically the menu.

So basically doing this, the fade in transition is enabled for the home and the about pages. But not for the blog pages!

Also, I put a transition:persist on the vue component menu and it persist it through all page changes as expected.

The problem is that this directive also disable the transition for everything that is at the same level on deeper than the file I put it. For example, if I declare the persistence in the global layout, everything is disabled, but the persistence works. When I put it directly in the Vue component, the persistence also works and doesn't disable the transitions.

I tested more, basically any transition directive has the same effect bugging the transitions, if I put a naming directive the effect is the same like the persistence one.

So.... is there something I am missing?

uncut dove
fast tendon
#

Hey @reef shore do you have a public repository I could look into to better understand your issues?
When you define transitions names, either direct with transition:nameor indirect with transition:animate or transition:persist. you define an additional transition group. The visual transition of those group is detached from the rout transition of the page. When you use transition:persist to copy an element from the current page to the next, it copies the complete DOM tree rooted at that element. Is one of these effect what you call "bugging the transitions"?

reef shore
#

still cannot make it work

fast tendon
#

I'll have a look

reef shore
#

thanks

fast tendon
#

First of all, make sure you use v4.4.x. There had been an issue with transition names containing spaces in 4.3.x!

This looks all as expected.
I'll give you a short explanation what i going on and than you should tell me what your expecations are 😉

"/" and "/about" only have the default transition group. This is named "root" and is defined by the browser on the document root (the <html> element)

"/blog" and "/blog/ui-kit-for-tailwind" have the default "root" group and a second group called "Demo_20post_203" which was introduced by transition:name={post.data.title}

<Footer transition:name="header" /> does define nothing. (transition:name is translated into a data-astro-transition-name attribute which is not used as property of Footer, hence it is lost)

The "root" group on the blog pages is the whole page BUT the picture, which forms the "Demo_20post_203" group.

Here are the groups and the animations:
/ -> /about:

image.png
#

/about -> /blog

image.png
#

/blog -> /blog/ui-kit-for-tailwind

image.png
#

(The long animation duration values come from the fact that I slowed down the speed to 10% in Chrome's dev tools.)

fast tendon
reef shore
#

Well... thank you for the clear explanation, I didn't understand how grouping was supposed to work.
I feel stupid now for overcomplicating something modeled this simple.
I just did some more test, and it seems it's actually working as it should in my full spaghetti code.

#

And it's evident I would be even dumber if I won't add vtbot to my debugging tools, lol

fast tendon
#

I guess there are two paths you can take: Just use <ViewTransitions /> at the page level and be done, or use the more sophisticated features of the browser's View Transition API (currently only Chrome, but others will follow). The latter has a steep learning curve, as there are currently few articles describing the details (notably https://developer.chrome.com/docs/web-platform/view-transitions).

#

The plan at least is to add some more documentation to the bag‘s jotter