使用 TailwindCSS 创建动画分段控件

Posted 2023-03-07

【中文标题】使用 TailwindCSS 创建动画分段控件

【英文标题】：Create an animated segmented control with TailwindCSS

【发布时间】：2021-04-18 00:47:58

【问题描述】：

我主要是后端开发人员，所以我对前端的东西不是很熟悉。我正在使用带有 Tailwind CSS 的 React 创建一个页面，并且我在页面上有这个分段控件。

目前，它工作得很好，白色背景和阴影在Monthly 和Yearly 之间静态变化。但是，我想让它动画/有一个过渡，以便白色背景/阴影从每月滑动到每年，反之亦然。我以前从未做过前端过渡/动画，所以不太确定如何去做，尤其是使用 Tailwind CSS。

这是当前分段控件的代码：

function makeRecurrenceIntervalButtons(
  currentInterval: RecurringPriceInterval,
  setInterval: (interval: RecurringPriceInterval) => void,
) 
  return ['month', 'year'].map((interval: RecurringPriceInterval) => 
    const className = currentInterval === interval
      ? `relative w-1/2 bg-white border-gray-200 rounded-md shadow-sm py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8`
      : `ml-0.5 relative w-1/2 border border-transparent rounded-md py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8`;

    const title = interval === 'month' ? 'Monthly' : 'Yearly';

    return (
      <button
        key=interval
        onClick=() => setInterval(interval)
        type="button"
        className=className
      >
        title
      </button>
    );
  );

我已经广泛查看了this 页面，但完全不确定如何正确应用它。任何帮助将不胜感激，谢谢！

【参考方案1】：

首先，您需要添加 transform 类 - 其他转换将不起作用。 接下来有几个类来控制你的转换时间 - duration 和 timing function 最后，在第一种情况下，您应该添加 translate-x-0，当它是 Yearly - translate-x-full - 它应该在 x 轴正方向上将按钮移动到它自己的全宽（不是父元素）上。

所以添加这个类，例如：

每月 - transform duration-700 ease-in-out translate-x-0

每年 - transform duration-700 ease-in-out translate-x-full