Wie implementieren Sie eine enge Übergangsanimation in React mithilfe der React-Transition-Gruppe?

Verwenden Sie react-transition-group in React, um nahtlose Schaltanimationen zu erreichen

Bei der React-Entwicklung ist react-transition-group eine gemeinsame Bibliothek zur Implementierung von Animationsschaltungen zwischen Komponenten. In praktischen Anwendungen treten jedoch häufig Entwickler auf Situationen auf, in denen der Animationseffekt nicht ideal ist, z. Dieser Artikel analysiert dieses Problem und bietet Lösungen.

Problembeschreibung: Ziel ist es, eine Komponentenschaltanimation zu realisieren, die von rechts nach links gleitet und die beiden Komponenten während des Animationsprozesses ohne Lücken eng miteinander verbunden sind. Der tatsächliche Effekt ist jedoch, dass zwischen den Komponenten leerer Platz besteht.

Beispiel für Fragencode:

<switchtransition>
  <csstransition classnames="checkout" key="{this.state.isPhone}" timeout="{500}">
    {this.state.isphone? (
      <phone handleback="{()"> this.setphonestate (false)} handlePhoneClick = {this.handlephoneClick} />
    ): (
      <main handlephoneclick="{this.handlePhoneClick}"></main>
    )}
  </phone></csstransition>
</switchtransition>

Entsprechender CSS -Stil:

 .
  Transformation: Translatex (100%);
}
.
  Transformation: Translatex (0);
  Übergang: alle 500 ms;
}

.Checkout-exit {
  Transformation: Translatex (0);
}
.Poneckout-exit-active {
  Transformation: Translatex (-100%);
  Übergang: alle 500 ms;
}

Problemanalyse: Der obige CSS-Code definiert den In-and-Out-Effekt der Animation, berücksichtigt jedoch nicht die Positionsbeziehung von Komponenten während des Animationsprozesses, was zu Lücken zwischen Komponenten führt.

Lösung: Der Schlüssel besteht darin, position: absolute Eigenschaft und steuern die Position der Komponente während des Animationsprozesses genau.

Korrekturer CSS -Stil:

 .
  Position: absolut;
  Rechts: 0;
  Transformation: Translatex (100%);
}
.
  Transformation: Translatex (0);
  Übergang: alle 500 ms;
}

.Checkout-exit {
  Position: absolut;
  links: 0;
  Transformation: Translatex (0);
}
.Poneckout-exit-active {
  Transformation: Translatex (-100%);
  Übergang: alle 500 ms;
}

Durch Festlegen von position: absolute und positionieren Sie die eingehenden und austretenden Komponenten rechts bzw. links im Container, stellen Sie sicher, dass die Komponenten während des Animationsprozesses immer eng miteinander verbunden sind, wodurch leere Bereiche beseitigt werden und die Animationseffekte nahtlos wechseln. Dies macht die Animation reibungsloser und die Benutzererfahrung besser.

Das obige ist der detaillierte Inhalt vonWie implementieren Sie eine enge Übergangsanimation in React mithilfe der React-Transition-Gruppe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!