outroing if_blocks cannot receive updates

[pushkine]

outroing if_blocks will not receive any update from the tick they get outroed on render_simple : https://svelte.dev/repl/3abed636ab2d456882e49b1db35c677f?version=3.20.1 render_compound : https://svelte.dev/repl/5e950ff7951f4afc9b627aa9832fae5b?version=3.20.1

render_simple does have the following comment in the compiler

// no `p()` here — we don't want to update outroing nodes,
// as that will typically result in glitching

it's been there since the initial commit 2 years ago

~~I don't really see why it couldn't be fixed, might give it a try in a few days~~

[furudean]

I ran into this today. I'm trying to conditionally set a class to play a "completion" animation as a fade out starts, but the class never gets set as described by this bug.

{#if $isVisible}
  <div
    class="loading-progress"
    class:finished={$isVisible === false}
    out:fade={{ delay: 600 }}
  />
{/if}

Are there any workarounds to this? I don't think I can get the behavior I want with this bug.

[furudean]

As an aside - setting a delay on the transition blocks updates too. Before the full rework it might be worth to look into if it's possible to allow state to update during a delay, as a separate PR.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[9ParsonsB]

Is this still being worked on? Is there a workaround?

[furudean]

Issues with no traction like this are pretty far down in the to-do for the core team. Pull requests are always welcome!

[raythurnvoid]

Given the now standard startViewTransition works foundamentally the same by taking a screenshot of the element you need to transition, and given that svelte takes a snapshot of the html for outro animation, should this even be considered a bug?

Instead what about you separate the variables you want to update from the state that controls the #if and then use flushSync to apply changes synchronously on the DOM right before the outro transition starts? It would be similar to what you have to do to use startViewTransition.

https://svelte.dev/playground/0178744068cf4fc3ac6b93345b66db82?version=latest

In this Playground i'm using a $derived to show the text in the outro elements instead of using directly the state and I use flushSync to set that $derived to perform the DOM mutations before the transition.

However i also had to add an invisible div at the bottom because i think i found out a bug while playing around with this :P

EDIT I changed the solution to use just tick rather than flushSync and no weird workaround are needed in that case