主页 / coding / 问题 / 78848795
Accepted
opensas
Asked: 2024-08-08 21:45:22 +0800 CST

动画 Tailwind 标签组件

  • 772

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

标签组件

你可以看到它在这个repl上运行

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

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

标签组件动画

我怎样才能实现这样的动画，是使用 tailwind 类还是 svelte 指令？

animation

1 个回答

  1. Best Answer

    一种方法是在标签下绘制一个元素并移动它，然后可以使用过渡来为移动制作动画。

    例如

    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>

    重新编译

    shadcn-svelte 网站使用 Svelte 交叉淡入淡出过渡：

    import { cubicInOut } from "svelte/easing";
import { crossfade } from "svelte/transition";

const [send, receive] = crossfade({
    duration: 250,
    easing: cubicInOut,
});

    {#if isActive}
    <div
        class="bg-muted absolute inset-0 rounded-full"
        in:send={{ key: "activetab" }}
        out:receive={{ key: "activetab" }}
    />
{/if}

    交叉淡入淡出存在透明度问题（覆盖两个部分透明的元素不会产生完全不透明的区域），但即便如此，对于像这样的小元素来说，它可能也不太明显。

    重新编译

    • 1

相关问题