面试题：Svelte中如何自定义一个简单的淡入动画

Question

在Svelte项目里，假设存在一个按钮，点击按钮后一个div元素从不可见到可见，并伴有淡入效果，用Svelte语法实现这个自定义淡入动画，简要说明动画实现的关键步骤。

Answer 1

Svelte 代码实现

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

<button on:click={toggleVisibility}>点击显示/隐藏</button>
{#if isVisible}
    <div in:fadeIn>淡入显示的内容</div>
{/if}

关键步骤说明

1. 定义状态变量：通过let isVisible = false;定义一个布尔变量isVisible，用于控制div元素的显示与隐藏。
2. 定义动画对象：const fadeIn = { duration: 500, css: t => opacity: ${t} };创建一个淡入动画对象，其中duration指定动画时长为500毫秒，css函数根据动画进度t（取值范围0 - 1）设置元素的opacity属性，实现淡入效果。
3. 定义切换函数：function toggleVisibility() { isVisible = !isVisible; }定义一个函数，用于在按钮点击时切换isVisible的值，从而控制div的显示与隐藏。
4. 应用动画：在div元素上使用in:fadeIn语法，当isVisible变为true时，div元素将会以定义的淡入动画显示。