动画顺风选项卡组件

Question

我使用 tailwind 和 svelte 创建了一个简单的选项卡组件，如下所示：

你可以看到它在这个repl

上工作

我想制作从一个选项到另一个选项的过渡动画

与此页面中发生的情况类似：https://www.shadcn-svelte.com/examples/dashboard

如何使用 tailwind 类或 svelte 指令来实现这样的动画？

Answer 1

一种方法是在选项卡下绘制一个元素并四处移动，然后可以使用过渡来动画化移动。

例如

let buttons = [];
$: ({ left, top, width, height } = (() => {
    const button = buttons[options.findIndex(o => o == value)];
    if (button == null)
        return { }; // Not mounted yet

    return button.getBoundingClientRect();
})())

<div class="... isolate"> <!-- Prevent z-index leakage -->
    <div
        class="absolute bg-white rounded-md transition-all"
        style="
            left: {left}px;
            top: {top}px;
            width: {width}px;
            height: {height}px;
        "></div>
    {#each options as option, i}
        <button
            bind:this={buttons[i]}
            on:click={() => (value = option)}
            class="z-10 ..."
            >{option}</button
        >
    {/each}
</div>

REPL