面试题：Svelte中如何结合内置过渡效果与组件生命周期实现淡入淡出效果

Question

在Svelte中，假设我们有一个简单的组件，当组件被创建时，希望内容以淡入效果显示，当组件销毁时，以淡出效果消失。请描述实现这一功能的主要步骤，并给出相应的Svelte代码示例。

Answer 1

实现步骤：

1. 在组件样式中定义淡入淡出的CSS过渡效果。
2. 在Svelte组件中使用 transition:fade 指令来应用这些过渡效果。

代码示例：

<script>
    let fade = {
        duration: 500,
        easing: t => t,
        css: t => `opacity: ${t}`
    };
</script>

<div transition:fade>
    这里是组件的内容
</div>

上述代码中，fade 是一个对象，定义了过渡的持续时间（duration）、缓动函数（easing）以及关键的CSS属性（css），通过 transition:fade 指令应用到 div 元素上，实现淡入淡出效果。