Svelte transition使用问题：如何实现点击复选框触发文字淡入再淡出？

你可以利用Svelte内置的过渡模块配合状态控制实现需求，具体实现步骤如下：

• 第一步：从svelte/transition包中导入fade过渡函数，同时声明两个状态变量：绑定复选框的checked状态、控制文字元素是否显示的visible状态。

<script>
  import { fade } from 'svelte/transition';
  let checked = false;
  let visible = false;
</script>

• 第二步：给复选框绑定change事件回调，每次点击时先把visible设为true触发文字淡入。

<script>
  // 接上文script代码
  function handleCheck() {
    checked = !checked;
    visible = true;
  }
</script>

<label>
  <input type="checkbox" bind:checked={checked} on:change={handleCheck}>
  点击切换状态
</label>

• 第三步：给文字元素绑定入、出的fade过渡，同时监听introend事件（入动画播放完成触发），回调中把visible设为false触发淡出效果。你可以自定义过渡的时长、延迟等参数。

{#if visible}
  <p 
    in:fade={{ duration: 800 }} 
    out:fade={{ duration: 800 }}
    on:introend={() => visible = false}
  >
    我会先淡入再自动淡出
  </p>
{/if}

你可以根据自身需求调整fade的duration（动画时长）、delay（延迟触发）参数，无需手动计算定时器时长，introend事件会在入动画完全播放完成后自动触发。

内容的提问来源于stack exchange，提问作者moog