Staggering-Komponenten bei der Eingabe mit der CSS-Übergangsgruppe

Ich möchte allen Kindern, die innerhalb einer ReactCssTransitionsGroup gerendert werden, einen Stagereffekt hinzufügen, aber nicht wissen, wie das geht. Ich schaute auf this Frage, möchte aber versuchen, es mit der Gruppe der Reaktivübergänge zu tun. Wenn es nicht möglich ist, werde ich etwas Ähnliches wie die oben stehende Frage tun.Staggering-Komponenten bei der Eingabe mit der CSS-Übergangsgruppe

meine Übergangskomponente ist ganz 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}) 
    ) 
)

Quelle

2015-07-29 Julien Vincent

Nutzung und n-ten Kindselektor + a sass Makro auf das übergeordnete Element. Habe es nie selbst gemacht, aber das ist die Grundidee: https://github.com/popcorn-time/popcorn-app/blob/master/sass/_movielist.scss#L116 –

Blick auf was Sie mich verlinkt - ich würde brauchen zu wissen, wie viele Kind-Komponenten und schreiben Sie einen CSS-Deskriptor für jeden einzelnen? –

Mit dieser Lösung würden Sie (oder haben Sie zumindest genug, um die Anzahl der Kinder zu decken). Da Sie bereits in Javascript Land sind, können Sie diesen Effekt im Code mit Inline-Stilen emulieren. –

8 months later und ich habe den besten Weg gefunden, dies zu tun, ohne ReactCSSTransitionsGroup. Die TransitionsGroup Komponente ist schlecht gewarteten und als Folge einige störende Bugs ui haben neigt:

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

um nur ein paar ...

react-motion

eingeben - 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.

Quelle

2016-04-10 21:29:10

Die offizielle ReactCSSTransitionsGroup ist schlecht gepflegt, sie wird in ihr eigenes Repository react-transition-group gespalten, um neues Leben einzuhauchen.

Wenn Ihnen glatte Animationen auch auf Mobilgeräten im unteren Bereich wichtig sind, ist reactive motion keine gute Lösung. Sie müssen sich dennoch auf CSS-Übergänge verlassen.

Sie können versuchen react-css-transition, die Ihnen zuverlässige CSS-Übergänge in React bietet.

Haftungsausschluss, ich bin der Schöpfer reagieren-CSS-Übergang

Quelle

2017-02-01 16:21:01

Dies ist eine sehr interessante Alternative. Auch wenn ich behaupten würde, dass "reaction motion" auch auf unteren Endgeräten sehr gut funktioniert (das untere Ende ist iPhone 5/Samsung S3), schlägt es dennoch nicht das CSS-Rendering. Gute Arbeit Chi! –

Zusätzlich - könnten Sie ein Beispiel für eine Staffelanimation angeben, um in den Umfang dieser Frage zu passen? –

Staggering-Komponenten bei der Eingabe mit der CSS-Übergangsgruppe

Antwort

Verwandte Themen