I have a list of articles, which need to be rendered in an interactive island (in my case a react component), because the articles need to be filtered (=> need interactivity, astro components won't do).
I would like to use the new, pretty morph view transition, when an article is clicked and the browser navigates to the full page of the specific article. This can be achieved in Astro by specifying the transition:nam="..." directive on an element on both the old page and the corresponding element on the new page.
My problem is, that while the new page, i.e. the article page is fully static, and rendered by astro, I can specify the directive, the article card on the article list page is rendered by React, where the transition name directive doesn't exist.
Is there some workaround for this? So that an element inside a react component can 'morph' into another element when navigating?
Initially I tried to keep the article cards static (astro components, with the proper transition:name directives), and somehow get React to filter these static components based on the selected filters, but since the astro components end up as static html when passed to React as children props, filtering static HTML is not a very good solution. I tried some CSS hacks in tailwind like using group on the react wrapper, group-data-[<filter>=false]:hidden on the article cards, and in the wrapper dynamically adding data-<filter> attributes, but these classes could not be generated by tailwind at build time, so that doesn't work.
Astro translates the
transition:namedirective into theview-transition-nameCSS property. You can use this CSS property directly on your React element to give it the same name as you use on the Astro page withtransition:name. I.e. on the React element use<something style="view-transition-name: article17">(or set the property in a style sheet) and on the Astro page use<div transition:name="article17">.