面试题：Svelte中如何实现一个元素的淡入动画并绑定点击事件

Question

在Svelte项目中，要求实现一个div元素，初始时透明度为0，页面加载后缓慢淡入（使用tween过渡动画）。并且当该div被点击时，在控制台打印出 '元素被点击' 字样。请写出完整的Svelte组件代码。

Answer 1

<script>
    import { tweened } from 'svelte/motion';

    const opacity = tweened(0, {
        duration: 1000,
        delay: 0
    });

    const handleClick = () => {
        console.log('元素被点击');
    };

    $: opacity.then((value) => {
        if (value === 1) {
            console.log('淡入完成');
        }
    });
</script>

<div style="opacity: {$opacity}" on:click={handleClick}>
    这是一个淡入的div
</div>