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

Question

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

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

还可以使用条件 HTML 属性：

<input disabled={null}>

这不适用于转换：

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

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

无法读取 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>

Answer 2

您还可以通过转换函数的包装来解决这个问题。演示在这里。

<script>
  import { fly, slide } from 'svelte/transition';
    
  export let animate = true;
    
  function maybe(node, options) {
    if (animate) {
      return options.fn(node, options);
    }
  }
</script>

<h1 in:maybe={{ fn: fly, x: 50 }} out:maybe={{ fn: slide }}>Hello!</h1>