面试题：Svelte中如何利用生命周期函数实现元素淡入过渡效果

Question

在Svelte中，要求你编写一个组件，当组件被创建时，其中的某个元素要有淡入的过渡效果，简述实现思路并给出核心代码。

Answer 1

实现思路

1. 在Svelte中，使用内置的过渡效果功能。
2. 为需要淡入效果的元素添加相应的过渡指令。
3. 利用on:create生命周期函数触发过渡效果，当组件创建时执行。

核心代码

<script>
    import { fade } from 'svelte/transition';
</script>

<div transition:fade="{{ duration: 1000 }}" on:create={() => {
    // 这里可以添加其他初始化逻辑，如果有需要
}}>
    这是一个有淡入过渡效果的元素
</div>

在上述代码中：

1. 从svelte/transition导入fade淡入过渡效果。
2. 在div元素上使用transition:fade指令，并通过对象形式设置duration为1000毫秒，即淡入效果持续1秒。
3. on:create事件可以用于在组件创建时执行额外逻辑，这里示例是可以添加其他初始化代码。