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

Question

在Svelte项目里，给定一个按钮元素，当按钮被点击后，让一个隐藏的div元素以淡入的过渡效果显示出来，请写出具体实现代码，需要结合Svelte的过渡语法和CSS样式。

Answer 1

1. Svelte组件代码（.svelte文件）：

<script>
    let isVisible = false;
    const fadeIn = {
        duration: 500,
        css: t => `
            opacity: ${t}
        `
    };
</script>

<button on:click={() => isVisible =!isVisible}>点击显示div</button>

{#if isVisible}
    <div transition:fadeIn>这是隐藏后淡入显示的div</div>
{/if}

2. CSS样式（可写在<style>标签内，若有全局样式也可在全局样式文件中设置）：

div {
    display: block;
    /* 其他你想要的div样式 */
}