I've been using svelte for a while and it's great but there is one thing I run into over and over again. Let's take the following code:
<script> import {flip} from 'svelte/animate'; import {fade} from 'svelte/transition'; let list = [];</script><div class="this-div-should-smoothly-change-size"> {#each list as item (item)}<div animate:flip transition:fade> {item}<button on:click={() => (list = list.filter(e => e !== item))}>X</button></div> {/each} </div><button on:click={() => (list = [...list, Math.random()])}> Add</button>
The flip animations on the list look great but the button below it still "jumps". All I want is to make the button move smoothly. Is it possible in svelte to make a container smoothly transition between sizes when its content changes?