javascript - 有没有if块的执行苗条过渡的方法吗？(Is there a way to perform svelte transition without a if block?)

Question

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

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

My question is can I use the transition without toggling the visibility?

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

  ask by Manan Joshi translate from so

Answer 1

the transtion directive or intro/outro is for transition when your component is created and added into the DOM, or destroyed and removed from the DOM.

(该transtion指令或片头/片尾是过渡创建时的成分，并添加到DOM，或销毁，并从DOM中删除。)

The only way to add/remove a component with Svelte is to use logic blocks like {#if} to add/remove a component based on a logic.

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

If you want to keep the component on the DOM, but still add animation, like fading the component in and out, you can consider using CSS transition or CSS animation by adding/removing CSS class, something like this .

(如果您希望将组件保留在DOM上，但仍要添加动画（例如使组件淡入和淡出），则可以考虑通过添加/删除CSS类来使用CSS过渡或CSS动画 ， 诸如此类 。)