カスタム変換アニメーション

この記事では、我々は反応/Trewindアプリでカスタム遷移アニメーションを作成します.
カードコンテナコンポーネントを3枚のカードで構築しましょう.単一のカードをクリックすると、幅と高さが変化します.それで、カードは活発になります.
シングルカードコンポーネントは次のようになります.

const Card = ({ title, color, id, setActiveCardId, activeCardId }) => {
  return (
    <div
      onClick={() => setActiveCardId(id)}
      className={`w-${activeCardId === id ? 40 : 32} border-2 border-black m-4`}
    >
      <div className="h-8 text-center">{title}</div>
      <div className={`h-${activeCardId === id ? 40 : 32} bg-${color}`} />
      <div className="h-12" />
    </div>
  );
};

idとactivecarted小道具が等しいならば、我々は幅と高さを40でないならば、40に設定して、それから32になります.
3枚のカードを内部にレンダリングするカードコンテナーを作成します.

function CardContainer() {
  const [activeCardId, setActiveCardId] = React.useState("");

  return (
    <div className="flex items-center justify-center p-10">
      {[
        { id: "1", title: "Wow", color: "red-600" },
        { id: "2", title: "Boss", color: "green-600" },
        { id: "3", title: "Coco", color: "pink-600" }
      ].map(card => (
        <Card
          key={card.id}
          id={card.id}
          title={card.title}
          color={card.color}
          activeCardId={activeCardId}
          setActiveCardId={setActiveCardId}
        />
      ))}
    </div>
  );
}

これは、ID、タイトル、およびカードのカードをレンダリングします.ここでActiveCardを保存します.今のところ、Tailwind.設定.js

empty module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
};

結果は次のようになります.

我々はいくつかのアニメーションを追加する場合は良いが、さらに完璧にすることができます.まず、Tailwindを変更しましょう.設定.幅と高さのためのカスタムTransfertionPropertyによるjs.とdefaultthemeを破壊することを忘れないでください.TransitionProperty -他に上書きしたくない

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        ...defaultTheme.transitionProperty,
        width: "width",
        height: "height"
      }
    }
  },
  variants: {},
  plugins: []
};

そして、カードで、幅と高さアニメーションのクラスのためにこのコード'遷移幅duration - 300簡単'を加えます:

const Card = ({ title, color, id, setActiveCardId, activeCardId }) => {
  return (
    <div
      onClick={() => setActiveCardId(id)}
      className={`w-${
        activeCardId === id ? 40 : 32
      } border-2 border-black m-4 transition-width duration-300 easy`}
    >
      <div className="h-8 text-center">{title}</div>
      <div
        className={`h-${
          activeCardId === id ? 40 : 32
        } bg-${color} transition-width duration-300 easy`}
      />
      <div className="h-12" />
    </div>
  );
};

最終結果

使用例:
https://codesandbox.io/s/react-tailwind-starter-forked-bkrv4?file=/src/App.js