Question

  <button on:click={() => (visible = !visible)}>Toggle</button>

  {#if !visible}
    <QuizArea
      transition:slide
      on:score={e => {
        playerScore = e.detail.score;
      }} />
  {/if}

我的问题是我可以在不切换可见性的情况下使用过渡吗？

Answer 1

the transtion directive或intro/outro用于在创建组件并将其添加到DOM或从DOM中删除并将其删除时进行过渡。

使用Svelte添加/删除组件的唯一方法是使用{#if}之类的逻辑块根据逻辑添加/删除组件。

如果您希望将组件保留在DOM上，但仍要添加动画，例如使组件淡入淡出，则可以考虑通过添加/删除CSS类来使用CSS transition或CSS animation like this。

Answer 2

使用{#each}和键

<script>
    import { fly } from "svelte/transition"

  let counter = 0;
    function increment() {
        counter++
    }
</script>

{#each [counter] as count (count)}
<h1 in:fly={{x: 100}}>Hello world!</h1>
{/each}
<button on:click={increment}>Go</button>

Svelte REPL

这是将{#each}块与一个项目一起使用，当键更改时，苗条地删除该组件并添加一个新的组件，从而触发转换。

使用来自“苗条/内部”的{create_in_transition}

<script>
    import { fly } from "svelte/transition"
    import { create_in_transition } from "svelte/internal"

    let element;
    let intro

    function animate() {
        if (!intro) {
            intro = create_in_transition(element, fly, {x: 100});   
        }   
        intro.start();

    }
</script>

<h1 bind:this={element}>Hello world!</h1>
<button on:click={animate}>Go</button>

Svelte REPL

具有类似的效果，但是该方法没有重复使用以前的组件并创建新的组件，而是重新使用了相同的实例。

但是使用内部 api是危险的，因为在更新svelte时它们可能会更改。
如果决定使用此功能，请在项目Readme.md中添加一行，并提及您使用的是哪个内部api以及原因。尝试使用其他方法编写它。

有没有if块的执行苗条过渡的方法吗？

2 个答案:

使用{#each}和键

使用来自“苗条/内部”的{create_in_transition}