kit
kit copied to clipboard
sveltejs
Allow playing transitions on initial render
Describe the problem
In Svelte, you can play transitions on initial render by setting intro: true in the component constructor. There doesn't seem to be a way to do this in SvelteKit.
Describe the proposed solution
Add a setting in svelte.config.js that will set intro: true in the component constructor. This would only apply during the initial render. After client-side navigation, transitions should play automatically as components are mounted.
Alternatives considered
No response
Importance
nice to have
Additional Information
No response
This has come up in Sapper (https://github.com/sveltejs/sapper/issues/1106) and I don't think the question of what this would mean for SvelteKit is any clearer.
Also interested in using this. I think it makes sense to implement with a browser check since the transitions wouldn't need to play in SSR.
I am wondering if I am actually also running into this issue at the moment.
I have a page, which has a date as URL parameter. If I switch to another page (actually just navigating to a route with a different date), a new view is created and each cell (in a month view) is animated.
However: when firing up the page directly via URL, it shows the first a loading animation and then instead of playing transitions as expected (e.g. in:fade), it just draws everything in a finished state. When moving, the animation is performed as expected.
Is it perhaps this limitation?
It's the same problem, yes. This library provides a hacky workaround you can use for now: https://fractils.fractal-hq.com/#OnMount
It might also be a good idea to be able to enable this functionality per-component or per-page. I really need this feature in my own project and it would be very nice to have.
It's the same problem, yes. This library provides a hacky workaround you can use for now: https://fractils.fractal-hq.com/#OnMount
This works, but it prevents SSR. I get similar results by:
{#if someVar}
<Component transition:someAnimation/>
{if}
is it possible to revert back to svelte 3 until this is resolved? or is it going to break more things by doing so?
I'm on a completely empty sveltekit skeleton project. I'm starting fresh, but it comes with svelte 4.
I just ran into this after trying to update my svelte site, originally when clicking between links it seems like transitions were played per component being swapped in and out, allowing a pretty interesting visual when updating between pages. I'd really like to achieve the same effect with as minimal a code change as possible, I really like how it worked previously.
