有没有办法在没有 if 块的情况下执行苗条的过渡？

Question

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

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

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

Answer 1

使用{#key}块：

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

复制代码

{#key}是在 Svelte v3.28 中引入的，在此之前您需要使用只有一个项目的键控{#each}块

当 key 发生变化时，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>

复制代码

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

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

Answer 2

该transition指令或intro/outro用于在您的组件创建并添加到 DOM 或销毁并从 DOM 中删除时进行转换。

使用 Svelte 添加/删除组件的唯一方法是使用逻辑块，例如{#if}基于逻辑添加/删除组件。

如果您想将组件保留在 DOM 上，但仍要添加动画，例如使组件淡入淡出，则可以考虑通过添加/删除 CSS 类来使用CSS 过渡或CSS 动画，例如这样的。