英文:
Svelte transition on an #each block
问题
使用Svelte，我正在尝试在{#each}块中实现飞入过渡。这是否可能？
请参阅下面的重要代码，也可以在此REPL中找到：
{#if visible}
{@const i=1000}
<div in:fly={{ y: 50, duration:i, delay: 100, easing: cubicOut }}>
test234
</div>
<div in:fly={{ y: 50, duration:i, delay: 100, easing: cubicOut }}>
test234
</div>
{#each values as value (value.i)}
<div in:fly={{ y: 50, duration: value.i*300, delay: 100, easing: cubicOut }}>
{value.val} and i is {value.i}
</div>
{/each}
{/if}
英文:
Using svelte I am trying to implement a fly transition in an {#each} block. Is that possible?
See below the important code that can be also found in this REPL
{#if visible}
{@const i=1000}
<div in:fly={{ y: 50, duration:i, delay: 100, easing: cubicOut }}>
test234
</div>
<div in:fly={{ y: 50, duration:i, delay: 100, easing: cubicOut }}>
test234
</div>
{#each values as value (value.i)}
<div in:fly={{ y: 50, duration: value.i*300, delay: 100, easing: cubicOut }}>
{value.val} and i is {value.i}
</div>
{/each}
{/if}
答案1
得分: 1
自 Svelte 4 开始，默认情况下，过渡是局部的。添加 |global 标志将使其工作（而不是映射值，可以使用 #each 块的索引）。
{#each values as value, index}
<div in:fly|global={{ y: 50, duration: index*300, delay: 100, easing: cubicOut }}>
{value.val} and i is {value.i}
</div>
{/each}
英文:
Since Svelte 4 Transitions are local by default
Adding the |global flag will make it work (and instead of mapping the values, the index of the #each block could be used)
{#each values as value, index}
<div in:fly|global={{ y: 50, duration: index*300, delay: 100, easing: cubicOut }}>
{value.val} and i is {value.i}
</div>
{/each}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论