Analyse der Gründe, warum Animationen in React nicht wirksam werden

Dieser Artikel stellt Ihnen die Analyse der Gründe vor, warum Animationen in React nicht wirksam werden. Freunde in Not können sich darauf beziehen.

Das Projekt muss eine solche Komponente herstellen
Je nach unterschiedlichen Werten ist die Breite dieses blauen Balkens unterschiedlich.
Das ist eigentlich sehr einfach. Ich muss nur die Breite basierend auf den Daten dynamisch berechnen und Knoten generieren.
Ein Teil des Reaktionscodes lautet wie folgt

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

Auf diese Weise kann die im Bild oben gezeigte Funktionsanzeige realisiert werden, aber jetzt gibt es eine weitere Anforderung, nämlich den blauen Balken verschieben, wenn es zum ersten Mal geladen wird.

Übergang

Ich dachte zuerst an das Übergangsattribut von CSS und fügte es dann dem Code hinzu

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

Aber die Animation wurde nicht wirksam.

Dann ging ich zurück und dachte darüber nach, warum es nicht funktioniert hat?
Das Übergangsattribut wird nur wirksam, wenn sich das Breitenattribut ändert. Jetzt kann nur noch angezeigt werden, dass sich die Breite von span nicht geändert hat.
Lassen Sie uns nun über meinen Code sprechen Er berechnet die Breite beim Rendern des Knotens, was bedeutet, dass die Breite beim Generieren des Knotens bereits festgelegt wurde. Daher wird der Übergang natürlich nicht wirksam.

Wie kann ich nun diesen Code verbessern, damit die Animation wirksam wird?

Ich kann den Knoten nur zuerst generieren lassen und dann seine Breite ändern.
Das erinnert mich an das Attribut ref in React. Dieses Attribut akzeptiert eine Zeichenfolge oder eine Funktion, und diese Funktion wird ausgelöst, nachdem der Knoten geladen wurde oder bevor der Knoten zerstört wurde this Die von der Funktion zurückgegebenen Parameter werden verwendet, um die Breite dieses Knotens zu ändern, was genau das ist, was ich brauche.
Sobald Sie eine Idee haben, beginnen Sie mit der Verbesserung des Codes.

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

Dann öffnen Sie den Browser, um das Ergebnis zu sehen, und es war erfolgreich.
Der Effekt ist wie folgt.

Verwandte Empfehlungen:

So implementieren Sie die Methode zum Hochladen und Komprimieren von Bildern in js

Verwendung von React: Wie React die Benutzeroberfläche rendert

Das obige ist der detaillierte Inhalt vonAnalyse der Gründe, warum Animationen in React nicht wirksam werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!