Reactでアニメーションが効かない原因の分析

この記事では、React でアニメーションが機能しない原因の分析を紹介します。必要な場合は参考にしてください。

プロジェクトでそのようなコンポーネントを作成する必要があります
異なる値に応じて、青いバーは異なる幅を表示します。
これは実際には非常に簡単で、データに基づいて幅を動的に計算し、ノードを生成するだけです。
反応コードの一部は以下の通りです

{data && data.length > 0
          ? data.map((item, index) => (
              <p>
                </p><p>
                  <span>{item.name || item.label}</span>
                  <span>{item.value}</span>
                </p>
                <p>
                  <span></span>
                </p>
              
            ))
          : null}

このようにして、上図のような関数表示を実現できますが、最初のロード時に青いバーが移動する必要があるという要件があります。 。

transition

最初にCSSのtransition属性を考えてコードに追加しました

.inner {
        width: 0;
        transition: width 0.6s ease;
      }

しかしアニメーションが反映されませんでした。

それから戻って、なぜうまくいかないのか考えてみました。
transition 属性は、width 属性が変更された場合にのみ有効になります。これで、spanの幅が変更されていないことのみを示すことができます。
ここで私のコードについて話しましょうノードのレンダリング中に幅が計算されます。つまり、ノードが生成された時点で幅はすでに設定されています。したがって、当然トランジションは有効になりません

さて、アニメーションを有効にするためにこのコードを改善するにはどうすればよいでしょうか?

最初にノードを生成してから、その幅を変更することしかできません。
これは、react の ref 属性を思い出させます。この属性は文字列または関数を受け取り、この関数はノードがロードされた後、またはノードが破棄される前にトリガーされます。その後、これによって返されたパラメーターを通じて操作できます。このノードは幅を変更します。これはまさに私が必要とするものです。
アイデアを思いつき、コードの改善を始めてください。

{data && data.length > 0
          ? data.map((item, index) => (
              <p>
                </p><p>
                  <span>{item.name || item.label}</span>
                  <span>{item.value}</span>
                </p>
                <p>
                  <span> {
                      if (n && n.style) {
                        n.style.width = `${getWidth(item.value)}px`;
                      }
                    }}
                  />
                </span></p>
              
            ))
          : null}

そしてブラウザを開いて結果を確認してみると、確かに成功しました。
効果は以下の通りです。

関連する推奨事項:

js 画像をアップロードして圧縮するメソッドの実装方法

React の使用法: React が UI をレンダリングする方法

以上がReactでアニメーションが効かない原因の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。