面试题：Svelte中Transition和Animation的基础差异

Question

请阐述在Svelte组件中，Transition和Animation在使用场景、触发方式以及效果呈现上有哪些基础的差异。并举例说明如何在一个简单的Svelte组件中分别实现一个过渡效果（Transition）和一个动画效果（Animation）。

Answer 1

使用场景差异

• Transition（过渡）：通常用于元素状态变化时的过渡，比如元素的显示与隐藏、从一种样式到另一种样式的切换等。强调状态间的平滑过渡。
• Animation（动画）：更侧重于创建复杂的、持续一段时间且循环或按特定顺序执行的动态效果，比如旋转的图标、闪烁的元素等，通常与元素状态变化无关，独立存在。

触发方式差异

• Transition：常由元素的状态改变触发，如if块控制元素的显示隐藏，class切换导致样式改变等。
• Animation：可以通过元素加载、事件（如点击、悬停）等触发，还能基于时间自动触发。

效果呈现差异

• Transition：效果相对简单，是从一个状态到另一个状态的过渡，过渡完成后元素保持最终状态。
• Animation：可实现复杂、多步骤、循环或按顺序的动态变化，动画结束后可以回到初始状态或保持最终状态，取决于设置。

示例

过渡效果（Transition）

<script>
    let visible = true;
    function toggle() {
        visible = !visible;
    }
</script>

<button on:click={toggle}>Toggle</button>

{#if visible}
    <div in:fade out:fade>
        This is a fading element.
    </div>
{/if}

这里使用了Svelte内置的fade过渡，当按钮点击时，visible状态改变，div元素会淡入淡出。

动画效果（Animation）

<script>
    let isHovered = false;
    const myAnimation = {
        duration: 2000,
        easing: 'ease-in-out',
        css: t => `
            transform: rotate(${t * 360}deg);
        `
    };
</script>

<button on:mouseenter={() => isHovered = true} on:mouseleave={() => isHovered = false}>
    {#if isHovered}
        <div animate:myAnimation>
            Rotating on hover
        </div>
    {/if}
</button>

此例中，当鼠标悬停在按钮上，div元素会在2秒内以ease - in - out的缓动函数进行360度旋转的动画。