面试题：Svelte组件动画之基础过渡效果应用

Question

在Svelte中，如何为一个按钮组件添加淡入的过渡效果？请写出关键代码，并解释transition属性的使用原理。

Answer 1

1. 关键代码：

   <script>
       import { fade } from'svelte/transition';
   </script>
   
   <button transition:fade={{ duration: 500 }}>点击我</button>
   

2. transition属性使用原理：
   • 在Svelte中，transition属性用于为元素添加过渡效果。当元素插入到DOM（进入过渡）或从DOM中移除（离开过渡）时，过渡效果就会触发。
   • 这里使用了Svelte内置的fade过渡函数，该函数实现了淡入淡出效果。通过transition:fade这种语法将fade过渡应用到按钮元素上。
   • 可以传递一个对象作为参数给fade函数，如{ duration: 500 }，这里的duration属性表示过渡效果持续的时间，单位是毫秒，即淡入效果将在500毫秒内完成。Svelte会根据过渡函数的逻辑，在指定的时间内改变元素的相关样式（如opacity属性来实现淡入淡出），从而产生过渡动画效果。