面试题：Svelte动画基础：动画过渡效果的实现

Question

在Svelte中，如何为一个元素添加淡入淡出的过渡动画？请描述实现的步骤，并给出相关的代码示例。假设该元素是一个按钮，初始状态为隐藏，当点击另一个按钮时显示并伴有淡入动画，再次点击时隐藏并伴有淡出动画。

Answer 1

1. 实现步骤：
   • 导入Svelte的过渡函数，Svelte提供了fade过渡，它是内置的淡入淡出过渡。
   • 在组件中定义一个变量来控制按钮的显示状态。
   • 使用{#if}块结合过渡指令来实现淡入淡出效果，通过点击按钮改变控制显示状态的变量值。
2. 代码示例：

<script>
    import { fade } from'svelte/transition';
    let isVisible = false;
    const toggleVisibility = () => {
        isVisible =!isVisible;
    };
</script>

<button on:click={toggleVisibility}>Toggle</button>

{#if isVisible}
    <button transition:fade>Target Button</button>
{/if}

在上述代码中：

• 首先从svelte/transition导入fade过渡函数。
• 定义isVisible变量来控制目标按钮的显示状态，初始值为false。
• toggleVisibility函数用于切换isVisible的值。
• 外层按钮用于触发切换操作，{#if isVisible}块内的按钮应用了fade过渡，当isVisible变为true时淡入显示，变为false时淡出隐藏。