面试题：Svelte中fade与fly动画结合基础应用

Question

在Svelte项目中，给定一个简单的按钮组件，要求你使用fade和fly动画，当按钮被点击时，按钮先以fade效果消失，然后在另一个位置以fly效果出现。请描述实现此功能的主要步骤，并给出关键代码片段。

Answer 1

主要步骤

1. 安装 svelte/animate 库，因为 fade 和 fly 动画效果来自该库。
2. 在组件中定义一个变量来控制按钮的显示状态，例如 isVisible。
3. 为按钮添加点击事件处理函数，在函数中改变 isVisible 的值。
4. 使用 fade 动画让按钮在 isVisible 变为 false 时以淡入淡出效果消失。
5. 使用 fly 动画让按钮在 isVisible 变为 true 时从另一个位置飞入。

关键代码片段

<script>
  import { fade, fly } from'svelte/animate';
  let isVisible = true;

  const handleClick = () => {
    isVisible =!isVisible;
  };
</script>

<button
  on:click={handleClick}
  {#if isVisible}
    in:fly={{ y: -100, duration: 500 }}
    out:fade={{ duration: 300 }}
  {/if}
>
  Click me
</button>