javascript - 有没有一种方法可以在没有 if block 的情况下执行 slim 的过渡？

Question

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

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

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

Answer 1

使用{#key} block :

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

function restart() {
  unique = {} // every {} is unique, {} === {} evaluates to false
}
</script>

{#key unique}
  <h1 in:fly={{x: 100}}>Hello world!</h1>
{/key}

<button on:click={restart}>Restart</button>

REPL

{#key} 是在 Svelte v3.28 中引入的，在此之前您需要使用键控 {#each} block with only one item

当键改变时，svelte 移除组件并添加一个新组件，从而触发转换。

使用来自“svelte/internal”的{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>

REPL

具有类似的效果，但不是删除以前的组件并创建一个新组件，此方法重新使用相同的实例。

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