svelte - 如何在 Svelte 中定义条件转换？

Question

在 Svelte 中，我们可以添加过渡:

<div in:fade={{duration: 150}}>...</div>

也可以使用条件 HTML 属性:

<input disabled={null}>

这不适用于过渡:

<div in:fade={null}>...</div>

这会抛出此错误，因为它需要一个配置对象:

Cannot read property 'delay' of null

那么在 Svelte 中添加条件转换的合适方法是什么？

以外:

{#if animate}
    <div in:fade></div>
{:else}
    <div></div>
{/if}

Answer 1

您可以将配置对象传递给持续时间为 0 的转换(有效地瞬时):

<script>
    import { fade } from 'svelte/transition'
    
    export let animate
</script>

<div in:fade={{ duration: animate ? 500 : 0 }}>
    ...
</div>