デイリーツーセント

今日は別の簡単な日になる.私が私が加えた微妙なアニメーションのもう一つをした方法を説明するつもりです.
私のプロジェクトのための「ブロック」の各々は、ユーザーをプロジェクトRepoに送るリンクです.あなたがリンクの上にホバーをするとき、イメージは少しずつズームします.ビデオなしで話すのは難しいです、しかし、私は以下の機嫌の悪い状態を示します.

これはリンクのunhovers状態です.

そして、これは敵対状態です.
私は、この微妙なアニメーションを加えるために反応春を使いました、そして、私はコードについて少し話します.私は各ページを作成するためのコンポーネントを使用して以来、私は少し創造的に取得する必要があります.

const [{ size0, size1, size2, size3 }, set] = useSpring(() => ({
    size0: "110",
    size1: "100",
    size2: "100",
    size3: "100",
  }))

これは、私がイメージの各々のために持っているセットアップです.私には4つのサイズの変数があります.私は、特定のイメージがdivに合わないので、最初の変数が110であることに言及します.

onMouseEnter={
                    index === 0
                      ? () => set({ size0: "120" })
                      : index === 1
                      ? () => set({ size1: "110" })
                      : index === 2
                      ? () => set({ size2: "110" })
                      : () => set({ size3: "110" })
                  }
                  onMouseLeave={
                    index === 0
                      ? () => set({ size0: "110" })
                      : index === 1
                      ? () => set({ size1: "100" })
                      : index === 2
                      ? () => set({ size2: "100" })
                      : () => set({ size3: "100" })
                  }

これにより、私はそれらの上にホバーオーバーとして、私はまた、私は元の値にそれらを返すことができます写真のサイズを変更することができます.私は三項文を使用したくないが、これは1つのイメージ以上の場合は、コンポーネントのすべての4つの画像をズームするコンポーネントです.そういうわけで、私はこの別の解決策を思い起こさなければなりませんでした(私が重要な何かを逃していない限り).
さて、それは今日私からすべてでありそうです.読書ありがとう!