Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Smooth container resizing in svelte

$
0
0

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?


Viewing all articles
Browse latest Browse all 1541

Trending Articles