面试题：Svelte过渡效果之基础应用

Question

在Svelte中，如何为一个按钮元素添加简单的淡入过渡效果？请写出关键代码片段，并解释涉及到的主要指令及作用。

Answer 1

1. 关键代码片段：

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

<button transition:fade>Click me</button>

2. 主要指令及作用：
   • import { fade } from'svelte/transition';：从 svelte/transition 模块中导入 fade 过渡函数。svelte/transition 模块提供了一系列内置的过渡效果函数，fade 用于实现淡入淡出效果。
   • transition:fade：这是Svelte的过渡指令，应用在 <button> 元素上。当该元素进入（例如初次渲染显示）或离开（例如通过 {#if} 块条件变化隐藏）DOM 时，会应用 fade 过渡效果，也就是实现淡入（进入时）和淡出（离开时）的动画效果。