Frage Staggering Komponenten treten mit react css-Übergangsgruppe ein


Ich möchte allen Kindern, die in einer ReactCssTransitionsGroup gerendert werden, einen Staffelungseffekt hinzufügen, aber nicht wissen, wie man das macht. Ich schaute zu Dies Frage, möchte aber versuchen, es mit der Reaktivübergangsgruppe zu tun. Wenn es nicht möglich ist, werde ich etwas Ähnliches wie die oben stehende Frage tun.

Meine Übergangskomponente ist ziemlich einfach:

Transitions({component: 'div', transitionName: 'stagger'},
    [1, 2, 3, 4, 5].map(i =>
            div({className: 'pure-u-md-1-3 pure-u-lg-1-4 medium-box demo', key: i})
    )
)

6
2017-07-29 13:36


Ursprung


Antworten:


8 months later und ich habe den besten Weg gefunden, dies ohne ReactCSSTransitionsGroup zu tun. Die TransitionsGroup-Komponente ist schlecht gepflegt und neigt daher zu einigen störenden ui-Fehlern:

  • Components not leaving DOM when switching tabs
  • Components not leaving DOM when there are a lot of entering/leaving components

um nur einige zu nennen...

Eingeben Reaktionsbewegung - Eine hochperformante Animationsbibliothek, die dem Entwickler viel Kontrolle gibt. Einschließlich atemberaubende Animationen kostenlos! Nachdem ich es einige Zeit benutzt habe, kann ich es als kompletten Ersatz für die ReactTransitionGroup empfehlen.


4
2018-04-10 21:29



Die offizielle ReactCSSTransitionsGroup ist schlecht gepflegt, sie wird in ein eigenes Repository aufgeteilt Reaktiv-Übergang-Gruppe neues Leben einatmen.

Wenn Ihnen glatte Animationen auch auf mobilen Endgeräten am unteren Ende der Skala wichtig sind, ist reaktive Bewegung keine gute Lösung. Sie müssen sich dennoch auf CSS-Übergänge verlassen.

Sie können es ausprobieren react-css-Übergang mit dem Ziel, Ihnen verlässliche CSS-Übergänge in React zu geben.

  • Disclaimer, ich bin der Schöpfer von react-css-transition

2
2018-02-01 16:21