使用TailwindCSS创建动画分段控件

Question

我主要是一个后端开发人员，所以我对前端的东西没有太多经验。我正在使用React和Tailwind CSS来创建一个页面，并且我在页面上有这个分段控件。

​

​

目前，它工作得很好，白色背景和阴影在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页面，但根本不确定如何正确地应用它。如有任何帮助，将不胜感激，谢谢！

Answer 1

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

因此，添加以下类，例如：

Monthly - transform duration-700 ease-in-out translate-x-0

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