在 Tailwind CSS 中制作动画选项卡？

Question

我想制作一个动画选项卡，例如：

我正在使用 React 和 Tailwind。这是我的代码：

import React from 'react'
import clsx from 'clsx'

export const Modal = () => {
  const [theme, setTheme] = React.useState<'light' | 'dark' | 'system'>('light')
  return (
    <div className="flex mx-2 mt-2 rounded-md bg-blue-gray-100">
      <div
        className={clsx('flex-1 py-1 my-2 ml-2 text-center rounded-md', {
          'bg-white': theme === 'light',
          'transition duration-1000 ease-out transform translate-x-10':
            theme !== 'light',
        })}
      >
        <button
          className={clsx(
            'w-full text-sm cursor-pointer select-none focus:outline-none',
            {
              'font-bold text-blue-gray-900': theme === 'light',
              'text-blue-gray-600': theme !== 'light',
            }
          )}
          onClick={() => {
            setTheme('light')
          }}
        >
          Light
        </button>
      </div>
      <div
        className={clsx('flex-1 py-1 my-2 ml-2 text-center rounded-md', {
          'bg-white': theme === 'dark',
        })}
      >
        <button
          className={clsx(
            'w-full text-sm cursor-pointer select-none focus:outline-none',
            {
              'font-bold text-blue-gray-900': theme === 'dark',
              'text-blue-gray-600': theme !== 'dark',
            }
          )}
          onClick={() => {
            setTheme('dark')
          }}
        >
          Dark
        </button>
      </div>
      <div
        className={clsx('flex-1 py-1 my-2 mr-2 text-center rounded-md', {
          'bg-white': theme === 'system',
        })}
      >
        <button
          className={clsx(
            'w-full text-sm cursor-pointer select-none focus:outline-none',
            {
              'font-bold text-blue-gray-900': theme === 'system',
              'text-blue-gray-600': theme !== 'system',
            }
          )}
          onClick={() => {
            setTheme('system')
          }}
        >
          System
        </button>
      </div>
    </div>
  )
}

但看起来像：

当主题不是

translate-x-10

时我使用

light

，因此文本也会移动。

我希望使 UI 与上面的 UI 完全相同，同时仍然使用实际选项卡的按钮。

最小 Codesandbox → https://codesandbox.io/s/mobx-theme-change-n1nvg?file=/src/App.tsx

我该怎么做？

Answer 1

您可以非常轻松地完成此动画，您需要在包含三个按钮的父元素内添加另一个标签元素。

因此，该元素将跟踪哪个按钮处于活动状态，并且它将根据其宽度移动。

例如，如果第一个按钮处于活动状态，则该元素根本不会被平移，因为它是第一个元素，所以位置将为 0。

这个将执行动画操作的元素将具有绝对定位，如下所示：

.tab-item-animate {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: 32px;
  transform-origin: 0 0;
  transition: transform 0.25s;
}

第一个按钮处于活动状态：

.tabs .tabs-item:first-child.active ~ .tab-item-animate {
  transform: translateX(0) scaleX(0.333);
}

第二个按钮激活：

.tabs .tabs-item:nth-child(2).active ~ .tab-item-animate {
  transform: translateX(33.333%) scaleX(0.333);
}

第三个按钮激活：

.tabs .tabs-item:nth-child(3).active ~ .tab-item-animate {
  transform: translateX(33.333% * 2) scaleX(0.333);
}

我对 Tailwind 没有太多经验，但我不确定你是否可以用它来管理整个事情（也许你可以用我的代码做一些其他操作，只用 Tailwind 来做到这一点）。

我为此添加了一个单独的 CSS 文件，我根据您共享的代码提供了一个演示：

选项卡动画链接

PS：我改变了你的 HTML 结构，你不需要在每个按钮上方添加另一个 div，这是没有必要的。

Answer 2

事实证明，使用纯 Tailwind 是可能的。

tailwind.config.js

module.exports = {
    theme: {
        extend: {
            translate: {
                200: '200%',
            },
        },
    },
}

应用程序.tsx

import * as React from "react"
import { observer } from "mobx-react"
import clsx from "clsx"

import { useStore } from "./context"

const AppTheme = observer(() => {
    const {
        theme: { app },
        updateTheme,
    } = useStore()

    return (
        <>
            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                <div className="mt-2">
                    <h4 className="text-xl font-bold text-gray-800">Background</h4>
                </div>
            </div>

            <div className="relative mx-2 mt-2 rounded-md bg-gray-100">
                <div
                    id="slider"
                    className={clsx(
                        "absolute inset-y-0 w-1/3 h-full px-4 py-1 transition-transform transform",
                        {
                            "translate-x-0": app === "light",
                            "translate-x-full": app === "dark",
                            "translate-x-200": app === "system",
                        },
                    )}
                    style={
                        app === "system"
                            ? {
                                    transform: "translateX(200%)", // if you added `translate-x-200` to `tailwind.config.js` then you can remove the `style` tag completely
                              }
                            : {}
                    }
                >
                    <div
                        className={clsx(
                            "w-full h-full bg-white rounded-md",
                            {
                                active: app === "light",
                                "bg-gray-600": app === "dark",
                            },
                            {
                                // needs to be separate object otherwise dark/light & system keys overlap resulting in a visual bug
                                ["bg-gray-600"]: app === "system",
                            },
                        )}
                    ></div>
                </div>
                <div className="relative flex w-full h-full">
                    <button
                        tabIndex={0}
                        className={clsx(
                            "py-1 my-2 ml-2 w-1/3 text-sm cursor-pointer select-none focus:outline-none",
                            {
                                active: app === "light",
                                "font-bold text--gray-900": app === "light",
                                "text--gray-600": app !== "light",
                            },
                        )}
                        onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {
                            if (event.key === "Tab")
                                updateTheme({
                                    app: "light",
                                })
                        }}
                        onClick={() => {
                            updateTheme({
                                app: "light",
                            })
                        }}
                    >
                        Light
                    </button>
                    <button
                        tabIndex={0}
                        className={clsx(
                            "py-1 my-2 ml-2 w-1/3 text-sm cursor-pointer select-none focus:outline-none",
                            {
                                active: app === "dark",
                                "font-bold text-white": app === "dark",
                                "text--gray-600": app !== "dark",
                            },
                        )}
                        onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {
                            if (event.key === "Tab")
                                updateTheme({
                                    app: "dark",
                                })
                        }}
                        onClick={() => {
                            updateTheme({
                                app: "dark",
                            })
                        }}
                    >
                        Dark
                    </button>
                    <button
                        tabIndex={0}
                        className={clsx(
                            "py-1 my-2 ml-2 w-1/3 text-sm cursor-pointer select-none focus:outline-none",
                            {
                                active: app === "system",
                                "font-bold text-white": app === "system",
                                "text--gray-600": app !== "system",
                            },
                        )}
                        onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {
                            if (event.key === "Tab")
                                updateTheme({
                                    app: "system",
                                })
                        }}
                        onClick={() => {
                            updateTheme({
                                app: "system",
                            })
                        }}
                    >
                        System
                    </button>
                </div>
            </div>
        </>
    )
})

export default observer(function App() {
    return <AppTheme />
})

Codesandbox → https://codesandbox.io/s/mobx-theme-change-animated-18gc6?file=/src/App.tsx

不知道为什么它在 Codesandbox 上没有动画，但可以在本地运行。也许是 Codesandbox 的错误:)

Answer 3

这方面的一个很好的资源是：Material Tailwind