面试题：Svelte中如何在生命周期函数中结合动画打造交互式UI

Question

在Svelte项目里，假设要为一个组件创建淡入淡出的过渡效果，且希望在组件创建时触发淡入动画，在组件销毁时触发淡出动画。请描述实现此功能需要用到哪些生命周期函数，并给出关键代码示例。

Answer 1

用到的生命周期函数

1. onMount：用于在组件挂载到DOM后执行代码，触发淡入动画。
2. onDestroy：用于在组件从DOM中移除前执行代码，触发淡出动画。

关键代码示例

<script>
    import { onMount, onDestroy } from 'svelte';

    let fadeIn = true;
    let fadeOut = false;

    onMount(() => {
        fadeIn = true;
        setTimeout(() => {
            fadeIn = false;
        }, 1000); // 淡入持续1秒
    });

    onDestroy(() => {
        fadeOut = true;
        setTimeout(() => {
            // 这里可以做一些清理工作，淡出动画结束
        }, 1000); // 淡出持续1秒
    });
</script>

<div style="opacity: {fadeIn ? '0' : '1'}{fadeOut ? '0' : ''}" class:fade-in={fadeIn} class:fade-out={fadeOut}>
    这是带有淡入淡出效果的组件内容
</div>

<style>
    .fade-in {
        opacity: 0;
        animation: fadeIn 1s ease forwards;
    }
    .fade-out {
        opacity: 1;
        animation: fadeOut 1s ease forwards;
    }
    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }
    @keyframes fadeOut {
        to {
            opacity: 0;
        }
    }
</style>