Don't destroy components inside falsey {#if} blocks #9976
Comments
|
Does a conditional |
|
It doesn't work in every situation I've needed this. |
I recommend thinking what it supposed to be instead. Conditional block meant to be as it is, same with anywhere else. Everyone expecting it to be destroyed since the element is not there, in the DOM tree.
Svelte transition is for that and definitely coupled with mount/destroy. So you should fix your design. Either use css transition for the show/hide or rearrange your logic. Btw complex logic better to be placed in a store instead of in a component. |
|
<div style:display={visible ? null : 'none'}>
Lorem ipsum
</div>But this do no allow transition... In order to do this, you should use an action, but unfortunately, currently there is no way to use the transition module manually (see issue #9911). |
|
In React we used stores too - we also use localStorage to hydrate stores on page refresh for more persistent data. We expect to do the same in Svelte as recommended by @CallMeLaNN . Porting my Nextjs app to Svelte and I must say, Svelte is soooooo much better! Thanks svelte team. |
@adiguba I'm using transitions so that's one reason why I don't use
@gregg-cbs Thanks for the recommendation I'll look into this. |
|
I tried to implement a solution to use transitions without creating/destroying elements (so without I choose Anyway, Something like this <div transition:slide transition:this={visible}>
...
</div>It's still a little buggy (especially when interrupting a transition) and incomplete (need some compile-time verification, SSR support). |
|
Svelte transition is a limited and convenient way to apply transition when element enter or leave DOM. Like I said it simply achievable using CSS transition. I'm not sure why this is not suitable https://svelte.dev/repl/5f43b715812845c3ad153cab01c4d234?version=4.2.8 <div class="fade" style:opacity={visible ? "1" : "0"} >
Lorem ipsum
</div>
<style>
.fade {
transition: opacity 1s;
}
</style>You can wrap with a component or use Svelte action to make it less. |
And Svelte's transition are achievable using CSS animation, but they allow use to correctly handle all the process (like destroying the element after the animation end, creating dynamic animation, etc). Your example is very simple and incomplete, as the DOM element is not marked as "display:none" it's still present on the DOM. Another example that can be more difficult in pure CSS : All these things are already managed by Svelte's transitions... except that it destroy the element instead of hide it. |
|
How about using display none and transition-behavior to enable animations ? |
|
@n0n3br : transition-behavior is still experimental and not supported by all browser... And you have to create a transition using CSS. |
|
Chrome, Edge and Opera already support it. That represents maybe 65 to 66 percent of the market. Other browsers will come in the future. Maybe we could think of already integrating this option in some of the transitions svelte provides. MDN documentation states that to keep compatibility, all you have to do is to use a transition without this option before the one that includes it. |
|
Closing because solving this through a controlled |
Describe the problem
When using conditional blocks (e.g.:
{#if},{:else}, etc), any component on the inside will be destroyed/unmounted when the condition becomes false. This makes it difficult to persist state within conditional blocks, as all logic must be moved to the parent.Describe the proposed solution
Add some kind of an option to cause a conditional block to not unmount/destroy the markdown/component inside of itself. For example, something to the following effect could be done:
Alternatives considered
Open to anything.
Importance
would make my life easier
The text was updated successfully, but these errors were encountered: