Analyse des raisons pour lesquelles l'animation ne prend pas effet dans React

Cet article vous présente l'analyse des raisons pour lesquelles l'animation ne prend pas effet dans React. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Vous devez créer un tel composant dans votre projet
Selon différentes valeurs, la barre bleue affiche différentes largeurs.
C'est en fait très simple. J'ai juste besoin de calculer dynamiquement sa largeur en fonction des données et de générer des nœuds.
Une partie du code de réaction est la suivante

{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}

De cette façon, l'affichage fonctionnel comme indiqué dans l'image ci-dessus peut être obtenu, mais il y a maintenant une exigence, c'est-à-dire la barre bleue doit bouger lors de son premier chargement.

transition

J'ai d'abord pensé à l'attribut transition du CSS, puis je l'ai ajouté au code

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

Mais l'animation n'a pas pris effet.

Ensuite, je suis revenu et j'ai réfléchi à la raison pour laquelle cela n'avait pas fonctionné ?
L'attribut de transition ne prend effet que lorsque l'attribut de largeur change. Maintenant, cela montre seulement que la largeur de span n'a pas changé.
Parlons maintenant de mon code. Il calcule la largeur lors du rendu du nœud. En d'autres termes, lorsque le nœud est généré, la largeur est déjà définie. Alors bien sûr la transition ne prendra pas effet

Maintenant, comment puis-je améliorer ce code pour que l'animation prenne effet ?

Je ne peux que laisser le nœud être généré en premier, puis modifier sa largeur.
Cela me rappelle l'attribut ref dans React. Cet attribut accepte une chaîne ou une fonction, et cette fonction sera déclenchée après le chargement du nœud ou avant que le nœud ne soit détruit. this Les paramètres renvoyés par la fonction sont utilisés pour modifier la largeur de ce nœud, ce qui est exactement ce dont j'ai besoin.
Une fois que vous avez une idée, commencez à améliorer le code.

{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}

Ouvrez ensuite le navigateur pour voir le résultat, et c'est réussi.
L'effet est le suivant.

Recommandations associées :

Comment implémenter la méthode de téléchargement et de compression des images en js

Utilisation de React : comment React restitue l'interface utilisateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!