如何在 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>

Answer 2

接受的答案不太正确。想象一下，您有一个通知警报，在一个具有不同过渡的模态中有一个过渡。您想要防止在模式关闭时触发警报的转换。现在你遇到这种情况：

<!-- Modal.svelte -->
<div class="modal" transition:fade={{ duration: 500 }}>
  <div class="alert" transition:slide={{ duration: 0 }}>
    Alert!
  </div>
</div>

警报立即消失，而模态框慢慢消失。

相反，我建议创建一个可以在这些情况下重复使用的包装器组件：

<!-- Transition.svelte -->
<script lang="ts">
  import { slide } from 'svelte/transition';

  export let transition: boolean = true;
  export let duration: number = 500;
</script>

{#if transition}
  <div transition:slide={{ duration }}>
    <slot />
  </div>
{:else}
  <slot />
{/if}

<!-- Modal.svelte -->
<div class="modal" transition:fade={{ duration: 500 }}>
  <Transition transition={false}>
    <div class="alert">
      Alert!
    </div>
  </Transition>
</div>

Answer 3

您也可以通过围绕转换函数的包装来解决这个问题。 Demo here.

<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>

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

How to define a conditional transition in Svelte?

svelte