时间戳

首页 > 解决方案 > 使用 TailwindCSS 创建动画分段控件

css - 使用 TailwindCSS 创建动画分段控件

问题描述

我主要是后端开发人员，所以我对前端的东西没有那么丰富的经验。我正在使用带有 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>
    );
  });
}

我已经广泛地查看了这个页面，但根本不知道如何正确应用它。任何帮助将不胜感激，谢谢！

标签： cssreactjswebanimationtailwind-css

解决方案

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

所以添加这个类，例如：

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

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

推荐阅读