面试题：Svelte中如何实现简单的数据驱动动态过渡效果

Question

在Svelte中，假设你有一个按钮，点击按钮会改变一个布尔值，根据这个布尔值的变化，需要对一个元素实现淡入淡出的动态过渡效果。请描述实现这个功能的主要步骤，并写出关键代码片段。

Answer 1

主要步骤

1. 在Svelte组件中定义一个布尔变量来控制淡入淡出状态。
2. 创建一个按钮，绑定点击事件来切换这个布尔变量的值。
3. 使用Svelte的过渡效果，根据布尔变量的值来控制元素的淡入淡出。

关键代码片段

<script>
    let isVisible = false;
    function toggleVisibility() {
        isVisible = !isVisible;
    }
</script>

<button on:click={toggleVisibility}>
    {isVisible ? '隐藏' : '显示'}
</button>

{#if isVisible}
    <div transition:fade>
        这是一个淡入淡出的元素
    </div>
{/if}

在上述代码中，isVisible 变量控制元素的显示与隐藏。按钮的点击事件 toggleVisibility 函数会切换 isVisible 的值。当 isVisible 为 true 时，包含文本的 div 元素会显示，并且由于使用了 transition:fade，会有淡入淡出的效果。Svelte 内置的 fade 过渡效果会自动处理元素淡入淡出时的样式变化。