fallow storm
Is there a way to change the transition:animate directive from a lifecycle event ?
Say I want my main to fade between the index and about page, but I want my main to slide between the index and project page.
I can manage with setting data attributes and changing the view-transition-old and view-transition-new, but I wonder if there is another way to set it directly via the transition:animate directive.
Thanks!
agile stump
Hi @fallow storm, 👋
No, there is no way to change the CSS that get's generated for transition:animate from the lifecycle event listeners.
transition:animate emits CSS for the view transition pseudos to the current page. View transitions pick up their styling from the target page of the transition. So you can do something like: all navigation to the about page should fade and all navigation to the project page should slide, but what happens on back navigation again depends on the target page. So going back from project to index will only slide, if you set the slide animation on index and then navigating form about to index will also slide. Probably not what you want.
As I assume you already did, I would also check the from and to properties of the astro:before-preparation event and set a class or attribute on :root that I can use to control individual styling.
In your case, I would also do all the naming and styling for view transitions in CSS myself (no transition:* directives) to avoid contradicting definitions.
fallow storm
Hi <@834134594302640139>, 👋
No, there is no way to change the CSS that get's g...
Yeah that's what I went for more or less, but I am listening on the astro:before-swap event so I can have access to the event.info flag.
Depending on that flag I set data-animation on event.newDocument.documentElement.dataset.animation for my desired animation either based on the event.info flag or the fromTo pathname combination.
agile stump
Ah, yes, you mentioned event.info in the title. Saw this too late. There’s more than one way to do it 😉