Nesting Astro components prevents transition directives from animating

[sam-high]

Astro Info

Astro                    v3.0.12
Node                     v16.20.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Nested View Transitions stop animating when HTML with Transition Directives is nested too deep within Astro components.

e.g. when nesting an image

<img
  transition:name="test"
  transition:animate="initial"
  src="https://placehold.co/600x400/png"
/>

This level of nesting works

Images (Astro Component)
    Image (Astro Component)
        HTML image (with Transition Directives)

This level of nesting or more does not work

Images Container (Astro Component) ** Extra level
    Images (Astro Component)
        Image (Astro Component)
            HTML image (with Transition Directives)            

If I can help make this issue clearer please let me know.

What's the expected result?

Nested View Transitions to animate no matter how deeply they are nested.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ojxahh?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[adrianosmond]

I don't think that the fix that landed in 3.0.12 has fixed the stackblitz linked in the original post. If you go to the stackblitz link, update Astro to 3.0.12 and click the "Not working" link you'll see that you only get a full page cross-fade transition. On inspecting the (on the not working page, not the landing page) you can see it has a data-astro-transition-scope but no CSS with a view-transition-name for it has been generated.

[matthewp]

Ah, thanks, will take a look.

[sam-high]

I don't think that the fix that landed in 3.0.12 has fixed the stackblitz linked in the original post. If you go to the stackblitz link, update Astro to 3.0.12 and click the "Not working" link you'll see that you only get a full page cross-fade transition. On inspecting the (on the not working page, not the landing page) you can see it has a data-astro-transition-scope but no CSS with a view-transition-name for it has been generated.

You are right. I have updated the Link to Minimal Reproducible Example to Astro 3.0.12 and unfortunately, it does not resolve the issue.

Thanks for looking into the issue @matthewp

[martrapp]

Fwiw, an even more condensed version https://stackblitz.com/edit/github-ojxahh-hrpswf?file=package.json,src%2Fpages%2Findex.astro

Boils down to this

not-working-page.astro // lacks view-transition-name
  Layout.astro
    ImageContainer.astro // remove this and it works
      Images.astro
        Image.astro // sets transition name

[matthewp]

Are you happening to use transition:name and transition:persist on the same element?

[adrianosmond]

Fwiw, an even more condensed version https://stackblitz.com/edit/github-ojxahh-hrpswf?file=package.json,src%2Fpages%2Findex.astro

Boils down to this

not-working-page.astro // lacks view-transition-name
  Layout.astro
    ImageContainer.astro // remove this and it works
      Images.astro
        Image.astro // sets transition name

Not in this reproduction ☝️
And also not in the more convoluted case I was working on that led me to find this GH issue

[sam-high]

No, transition:name and transition:persist are not used on the same element on the Minimal Reproducible Example or in my production code.

Only transition:name and transition:animate are being used together.

[matthewp]

Thanks, this is the top of my list of issues to fix.

[matthewp]

I'm pretty sure I know what's causing this.

[matthewp]

So what's happening here is we use this plugin to track dependencies, so we know which components are going to be appending styles (and scripts) to the head: https://github.com/withastro/astro/blob/main/packages/astro/src/vite-plugin-head/index.ts

When we find a component that does this, such as one that has transition styles, it walks up the tree and marks parent components as having head metadata in them (the in-tree value).

In Image reproduction what happen is, the Image component loads on the index page, it walks up its parents, but the not-working.astro page has not been loaded yet, so it is not a parent. Later when not-working.astro loads, it never gets marked as having styles in-tree. So when we go to render it the page we don't know to wait on Image. So it doesn't.

The fix is that when a new module comes in, we need to check if it is marked as in-tree or self and then propagate this up. This should ensure that the metadata is in the entire tree at all times.

[matthewp]

PR up: #8646