Skip transitions on initial render

[Rich-Harris]

Particularly in the case of components that are replacing server-rendered HTML, you might want transitions to only run when data changes, rather than running when the component is first rendered.

Best way to do this is presumably with a directive along these lines...

<div in:fade initialintro:skip>...</div>

...except a little bit more concise. Any ideas?

[tony-sull]

Could skip be an optional property on the animation similar to delay, duration, etc.?

<div in:fade='{ initial: false }'>...</div>

or maybe more generic

<div in:fade='{ enabled: false }'>...</div>

[jacwright]

The component.observe method takes the parameter { init: false } to skip the initial trigger. We could go with consistency here: <div in:fade='{ init: false }'>...</div>.

[thgh]

Leaving this here: https://vuejs.org/v2/guide/transitions.html#Transitions-on-Initial-Render

<div appear in:fade></div>

I would expect no initial transition by default because how can something transition if there were no state/route changes?

[jacwright]

I agree with @thgh and was going to add a comment about the same. The default should be no transition on initial render. Transitions are mostly used to help the user of an app track changes and are not used for initial render as often.

[jacwright]

While I do think the default ought to be skipping the initial render transition, I would really like to have this soon and am ok with the default being no skip. I'm almost done with refactoring over to Svelte and this is the last user-visible issue I need fixed before I can launch in a few weeks. If there is a workaround I am open to that too.

Update: I can help out with it too! I'll check things out in a couple weeks when I'm done and see what I can contribute.

[Rich-Harris]

Yeah, my plan is for no initial transitions to be the default (enabled with intro: true in the init options for your top-level component, and <WIdget in:true/> below that). It'd be a breaking change though, so in the interim there probably needs to be a compiler option, just like we had with cascade: false and store: true prior to v2.

Am hoping to work on transitions again this weekend.

[jacwright]

What would be amazing.

[Rich-Harris]

As of 2.6 the skipIntroByDefault compiler prevents intros from running during the initial render. This will be the default in v3.

[johnnysprinkles]

Surely transitions should only happen based on state change in the same component right? The whole component coming into existence shouldn't trigger them, otherwise you get this unusual experience:

https://svelte.dev/repl/af5ae97dfaaf4e0a84bd5c0268ee677c?version=3.38.2

[johnnysprinkles]

Just discovered the |local modifier, which I think does exactly what I want. It's pretty scary how Svelte seems to have thought of everything.

Updated example at https://svelte.dev/repl/38eeb86d98d144d1b781e2f50048e416?version=3.38.2

[jacwright]

I complained that the default wasn’t local and made us add it. 😬

…

On Wed, May 5, 2021 at 8:46 PM John Simons ***@***.***> wrote: Just discovered the |local modifier, which I think does exactly what I want. It's pretty scary how Svelte seems to have thought of everything. Updated example at https://svelte.dev/repl/38eeb86d98d144d1b781e2f50048e416?version=3.38.2 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#547 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA5LZTLKTI3F7N7IKLKWEDTMH7H7ANCNFSM4DJV3UMQ> .