面试题：Svelte中如何实现元素的淡入过渡效果

Question

在Svelte项目里，给定一个按钮元素，当点击按钮时，希望一个隐藏的div元素以淡入的过渡效果显示出来，请写出实现该功能的主要代码逻辑，包括相关的样式和Svelte特有的语法。

Answer 1

1. Svelte组件代码 (App.svelte)

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

<button on:click={toggleVisibility}>点击显示</button>

{#if isVisible}
    <div in:fade>
        这是一个淡入显示的div
    </div>
{/if}

2. 样式（可在组件内<style>标签或外部CSS文件中）

/* 淡入过渡效果的默认样式 */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

div.in:fade {
    animation: fade-in 0.5s ease;
}