面试题：Svelte中内置过渡函数的基本使用

Question

在Svelte中，简述如何使用`fade`过渡函数为一个元素添加淡入淡出效果，并写出基本代码结构。同时说明`duration`参数在`fade`函数中的作用。

Answer 1

1. 使用fade过渡函数添加淡入淡出效果及基本代码结构：
   • 首先，在Svelte组件中，需要引入fade过渡函数。Svelte提供了内置的过渡效果，fade就是其中之一。
   • 假设我们有一个简单的div元素，要为其添加淡入淡出效果，代码结构如下：

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

<div transition:fade>
    这是一个具有淡入淡出效果的元素
</div>

2. duration参数在fade函数中的作用：
   • duration参数用于控制淡入淡出效果的持续时间，单位为毫秒。例如，如果我们想让淡入淡出效果持续1000毫秒（1秒），可以这样写：

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

<div transition:fade={{ duration: 1000 }}>
    这是一个淡入淡出持续1秒的元素
</div>

• 通过调整duration的值，可以让淡入淡出效果更快或更慢，以满足不同的交互需求。