Javascript 有没有一种方法可以在没有if块的情况下执行苗条过渡？ （可见=！可见）}>切换 {#如果！可见} { playerScore=e.detail.score； }} /> {/if}

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

或者，当您的组件被创建并添加到DOM中，或者被销毁并从DOM中删除时，我可以使用转换吗

添加/删除具有Svelte的组件的唯一方法是使用逻辑块，如

{if}

根据逻辑添加/删除组件

如果要保持组件在DOM上，但仍然添加动画，比如将组件淡入淡出，可以考虑使用或通过添加/移除CSS类，某物。

使用块：

从“苗条/过渡”导入{fly}
let unique={}
函数重新启动（）{
unique={}//每个{}都是唯一的，{}=={}的计算结果为false
}
{#密钥唯一性}
你好，世界！
{/key}
重新启动

{#key}

是在Svelte v3.28中引入的，在此之前，您需要使用一个键控的

{#each}

块

当关键点更改时，svelte将删除该组件并添加一个新组件，从而触发转换

从“svelte/internal”使用{create_in_transition}

从“苗条/过渡”导入{fly}
从“svelte/internal”导入{create_in_transition}
let元素；
让我们介绍一下
函数animate（）{
如果（！简介）{
intro=create_in_transition（元素，fly，{x:100}）；
}   
开始（）；
}
你好，世界！
去

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

但是使用内部api是危险的，因为当您更新svelte时，这些api可能会发生变化。
如果您决定使用它，请在您的项目中添加一行内容

Readme.md

说明您使用的内部api及其原因。

---

如果可以的话，尝试使用其他方法编写它。

默认情况下，状态更改导致元素进入或离开DOM时会触发转换。你想达到什么目标？如果您希望在创建组件时可以运行转换。此外，如果OP想要动画组件（而不是转换它），可以考虑使用@ Tan Li Hau，您认为在DOM上保留组件还是在需要时添加/删除DOM是好的？在我的例子中，我要求它提供一个弹出式过滤器，它将用于过滤项目列表页面上的项目。但是这个过滤器很大，有100-150行HTML。@Ulvi如果默认情况下弹出式过滤器不显示，并且大部分时间都不显示，那么只有在需要时才能创建它。@TanLiHau，感谢您分享您的意见。：）使用{#if value}{value}{/if}和{#key value}{value}{/key}进行转换或其他任何操作之间有什么优势或区别吗？转换不会使用#激活，如果当值没有从真值更改为假值时，它取决于您需要什么。

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

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