How can I create a ViewTransition using a dialog modal where I can still see the previous screen in the background?
#Transparent ViewTransition with Dialog
safe patrol
blissful pastureBOT
Hi @safe patrol. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the Astro documentation on View Transitions (https://docs.astro.build/en/guides/view-transitions#maintaining-state) for more information on how to use them. You might be able to achieve the desired effect by customizing the transition properties.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
safe patrol
@blissful pasture Is there a way to have a ViewTransition where I can still see the previous page if my background is transparent?
blissful pastureBOT
Let me check the knowledge base for you. One moment! :books:
Based on the knowledge sources provided, it seems that when a ViewTransition is triggered, the transitioning element is placed in a new layer that sits above all others on the page. This is due to the way the browser handles elements of a transition group. As explained by a Trusted Support Staff in a Discord support thread (https://discord.com/channels/830184174198718474/1203255033496604683):
The browser puts the elements of a transition group in a new layer that sits above all others on the page. The ::view-transition pseudo-element generates a new stacking context, called the view transition layer, which paints after all other content of the document (including any content rendered in the top layer), after any filters and effects that are applied to such content.
This means that even if your background is transparent, the transitioning element will still be placed above the previous page, obscuring it.
However, you might be able to manipulate the stacking context by putting the element you want to remain visible into a transition group with transition:animate="none". This should make it part of the new stacking context, but it's unclear whether you can force it above the main transition in this way.
Please note that this is a workaround and might not work as expected. For more detailed guidance, you might want to refer to the Astro documentation (https://docs.astro.build/core-concepts/astro-components) or seek further assistance from the Astro community.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
safe patrol
@blissful pasture Can I put a transition nested inside transition:animate="none" ?
blissful pastureBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information from the Github issue (https://github.com/withastro/astro/issues/10241), it seems that transition:animate="none" is used to define a new transition group but it does not change the overall animation behavior. It should be applied to elements in the body, but not to the <ViewTransition /> component itself.
If you want to switch off all animations, you can remove all transition:animate and transition:name directives from your pages as they introduce additional animations. Then, you can set a single transition:animate="none" on the <html> element in your layout to switch off the animations.