Etwas so Einfaches sollte leicht zu erreichen sein, aber ich ziehe mir die Haare aus, wie kompliziert es ist.
Ich möchte nur das Ein- und Aushängen einer React-Komponente animieren, fertig. Folgendes habe ich bisher versucht und warum nicht jede Lösung funktioniert:
ReactCSSTransitionGroup
- Ich verwende überhaupt keine CSS-Klassen, es sind alles JS-Stile, also funktioniert das nicht.ReactTransitionGroup
- Diese untergeordnete API ist großartig, erfordert jedoch die Verwendung eines Rückrufs, wenn die Animation abgeschlossen ist. Daher funktioniert es hier nicht, nur CSS-Übergänge zu verwenden. Es gibt immer Animationsbibliotheken, was zum nächsten Punkt führt:- GreenSock - Die Lizenzierung ist für die geschäftliche Nutzung IMO zu restriktiv.
- Reaktion reagieren - Dies scheint großartig zu sein, ist aber
TransitionMotion
äußerst verwirrend und für das, was ich brauche, zu kompliziert. - Natürlich kann ich einfach Tricks machen wie die Material-Benutzeroberfläche, bei der die Elemente gerendert werden, aber verborgen bleiben (
left: -10000px
), aber ich würde diesen Weg lieber nicht gehen. Ich halte es für hacky und ich will meine Komponenten damit sie bereinigen und das DOM nicht überladen.
Ich möchte etwas, das einfach ist zu implementieren ist. Animieren Sie auf dem Mount eine Reihe von Stilen. Animieren Sie beim Aushängen denselben (oder einen anderen) Satz von Stilen. Getan. Es muss auch auf mehreren Plattformen eine hohe Leistung bieten.
Ich habe hier eine Mauer getroffen. Wenn mir etwas fehlt und es eine einfache Möglichkeit gibt, lassen Sie es mich wissen.
transform: scale
.thing { color: #fff; }
) nicht mit JS-Stilen (const styles = { thing: { color: '#fff' } }
))Antworten:
Dies ist etwas langwierig, aber ich habe alle nativen Ereignisse und Methoden verwendet, um diese Animation zu erzielen. Nein
ReactCSSTransitionGroup
,ReactTransitionGroup
und etc.Dinge, die ich benutzt habe
onTransitionEnd
VeranstaltungWie das funktioniert
mounted
) und mit dem Standardstil (opacity: 0
)componentDidMount
(componentWillReceiveProps
für weitere Updates), um den Stil (opacity: 1
) mit einem Timeout zu ändern (um ihn asynchron zu machen).opacity: 0
)onTransitionEnd
und entfernen Sie das Aufheben der Bereitstellung aus dem DOM.Setzen Sie den Zyklus fort.
Gehen Sie den Code durch, Sie werden verstehen. Wenn eine Klarstellung erforderlich ist, hinterlassen Sie bitte einen Kommentar.
Hoffe das hilft.
quelle
onTransitionEnd
? Ich sehe es nicht in den React-Dokumenten.componentWillReceiveProps
dass etwas zurückgegeben werden kann? Wo kann ich mehr darüber lesen?Parent
Komponente verweisen Siethis.transitionEnd
Mit dem Wissen aus Praneshs Antwort habe ich eine alternative Lösung gefunden, die konfigurierbar und wiederverwendbar ist:
Verwendung:
Und schließlich in der
render
Methode einer anderen Komponente :quelle
componentWillLeave()
undcomponentWillEnter()
wird gerufenAnimatedMount
?Hier ist meine Lösung mit der neuen Hooks-API (mit TypeScript), die auf diesem Beitrag basiert , um die Unmount-Phase der Komponente zu verzögern:
Verwendung:
CodeSandbox- Link.
quelle
Ich habe diesem Problem während meiner Arbeit begegnet, und so einfach es schien, ist es wirklich nicht in React. In einem normalen Szenario, in dem Sie Folgendes rendern:
Bei
this.state.show
Änderungen werden die Kinder sofort montiert / unmontiert.Ein Ansatz, den ich gewählt habe, besteht darin, eine Wrapper-Komponente zu erstellen
Animate
und sie wie folgt zu verwendenJetzt
this.state.show
können wir als Änderungen Änderungen an Requisiten wahrnehmengetDerivedStateFromProps(componentWillReceiveProps)
und Zwischenrenderstufen erstellen, um Animationen auszuführen.Wir beginnen mit Static Stage wenn die Kinder montiert oder unmontiert sind.
Sobald wir die
show
Flag-Änderungen erkennen, betreten wir die Vorbereitungsphase, in der wir die erforderlichen Eigenschaften wieheight
und berechnenwidth
vonReactDOM.findDOMNode.getBoundingClientRect()
.Dann eintreten Wenn Sie Animate State eingeben, können Sie den CSS-Übergang verwenden, um Höhe, Breite und Deckkraft von 0 auf die berechneten Werte zu ändern (oder auf 0, wenn die Bereitstellung aufgehoben wird).
Am Ende des Übergangs verwenden wir
onTransitionEnd
API, um zurStatic
Bühne zurückzukehren.Es gibt viel mehr Details darüber, wie die Stufen reibungslos übertragen werden, aber dies könnte eine Gesamtidee sein :)
Wenn jemand interessiert ist, habe ich eine React-Bibliothek https://github.com/MingruiZhang/react-animate-mount erstellt , um meine Lösung zu teilen. Jede Rückmeldung willkommen :)
quelle
Ich denke, die Verwendung von
Transition
fromreact-transition-group
ist wahrscheinlich der einfachste Weg, um das Ein- und Aushängen zu verfolgen. Es ist unglaublich flexibel. Ich verwende einige Klassen, um zu zeigen, wie einfach die Verwendung ist, aber Sie können definitiv Ihre eigenen JS-Animationen verwendenaddEndListener
Requisiten verbinden - mit denen ich auch mit GSAP viel Glück hatte.Sandbox: https://codesandbox.io/s/k9xl9mkx2o
Und hier ist mein Code.
quelle
show
Requisite einfach an die gestaltete Komponente übergebenH1
und die gesamte Logik ausführen. Wie ...animation: ${({ show }) => show ? entranceKeyframes : exitKeyframes} 300ms ease-out forwards;
Framer-Bewegung
Installieren Sie die Framer-Bewegung von npm.
quelle
Für diejenigen, die eine Reaktionsbewegung in Betracht ziehen, kann das Animieren einer einzelnen Komponente beim Ein- und Aushängen überwältigend sein.
Es gibt eine Bibliothek namens React-Motion-UI-Pack , die diesen Prozess viel einfacher macht. Es ist ein Wrapper um React-Motion, was bedeutet, dass Sie alle Vorteile der Bibliothek nutzen können (dh Sie können die Animation unterbrechen und mehrere Unmounts gleichzeitig durchführen).
Verwendung:
Enter definiert den Endzustand der Komponente. Leave ist der Stil, der angewendet wird, wenn die Komponente nicht bereitgestellt wird.
Möglicherweise stellen Sie fest, dass die React-Motion-Bibliothek nach mehrmaliger Verwendung des UI-Pakets möglicherweise nicht mehr so entmutigend ist.
quelle
Das Animieren von Eingangs- und Ausgangsübergängen ist mit React -Move viel einfacher .
Beispiel auf Codesandbox
quelle
Dies kann einfach mit der
CSSTransition
Komponente aus erfolgenreact-transition-group
, die genau den von Ihnen erwähnten Bibliotheken entspricht. Der Trick ist , müssen Sie die CSSTransition Komponente wickeln , ohne Show / Hide - Mechanismus wie Sie in der Regel würde .ie{show && <Child>}...
Andernfalls Sie verstecken Animation und es wird nicht funktionieren. Beispiel:quelle
Hier meine 2 Cent: Danke an @deckele für seine Lösung. Meine Lösung basiert auf seiner, es ist die Komponentenversion des Stateful, die vollständig wiederverwendbar ist.
hier meine Sandbox: https://codesandbox.io/s/302mkm1m .
hier meine snippet.js:
quelle
So habe ich das 2019 gelöst, als ich einen Ladespinner gemacht habe. Ich verwende React-Funktionskomponenten.
Ich habe eine übergeordnete App- Komponente mit einer untergeordneten Spinner- Komponente.
Die App gibt an, ob die App geladen wird oder nicht. Wenn die App geladen wird, wird Spinner normal gerendert. Wenn die App nicht geladen wird (
isLoading
ist falsch), wird Spinner mit der Requisite gerendertshouldUnmount
.App.js :
Der Spinner hat den Status, ob er versteckt ist oder nicht. Zu Beginn wird Spinner mit den Standardrequisiten und dem Standardstatus normal gerendert. Die
Spinner-fadeIn
Klasse animiert das Einblenden. Wenn Spinner die Requisite erhält, wirdshouldUnmount
sieSpinner-fadeOut
stattdessen mit der Klasse gerendert und animiert das Ausblenden.Ich wollte jedoch auch, dass die Komponente nach dem Ausblenden ausgehängt wird.
Zu diesem Zeitpunkt habe ich versucht, das
onAnimationEnd
synthetische Ereignis "Reagieren" zu verwenden, ähnlich der obigen Lösung von @ pranesh-ravi, aber es hat nicht funktioniert. Stattdessen habe ichsetTimeout
den Status mit einer Verzögerung eingestellt, die der Länge der Animation entspricht. Der Spinner wird nach der Verzögerung mit aktualisiertisHidden === true
und es wird nichts gerendert.Der Schlüssel hierbei ist, dass der Elternteil das Kind nicht abmeldet, dem Kind mitteilt, wann es die Bereitstellung aufheben soll, und dass sich das Kind selbst abmeldet, nachdem es sich um das Aufheben der Bereitstellung gekümmert hat.
Spinner.js :
Spinner.css:
quelle
Ich brauchte auch dringend eine Einzelkomponenten-Animation. Ich war müde mit React Motion, aber ich zog meine Haare für solch ein triviales Problem. (Ich Sache). Nach einigem googeln bin ich auf diesen Beitrag auf ihrem Git Repo gestoßen. Hoffe es hilft jemandem ..
Referenziert von & auch die Gutschrift . Das funktioniert bei mir ab sofort. Mein Anwendungsfall war ein Modal zum Animieren und Aufheben der Bereitstellung beim Laden und Entladen.
quelle
Ich weiß, dass es hier viele Antworten gibt, aber ich habe immer noch keine gefunden, die meinen Bedürfnissen entspricht. Ich will:
Nach vielen Stunden des Fummelns habe ich eine Lösung, die zu 90% funktioniert. Ich habe die Einschränkung in einem Kommentarblock im folgenden Code geschrieben. Ich würde immer noch eine bessere Lösung lieben, aber dies ist die beste, die ich gefunden habe, einschließlich der anderen Lösungen hier.
Wenn Sie eine Komponente haben, die Sie ein- und ausblenden möchten, wickeln Sie sie in
<Fade>
Bsp.<Fade><MyComponent/><Fade>
.Beachten Sie, dass dies
react-bootstrap
für die Klassennamen und für verwendet wird<Container/>
, aber beide leicht durch benutzerdefiniertes CSS und ein normales altes ersetzt werden können<div>
.quelle
Wenn ich
Velocity
oderAnimeJS
Bibliothek verwende, um Knoten direkt (anstelle voncss
odersetTimeout
) zu animieren , habe ich herausgefunden, dass ich einen entwerfen kannhook
, um den Animationsstatuson
und die Funktion bereitzustellenonToggle
zum Starten der Animation bereitzustellen (z. B. Slidedown, Fade).Grundsätzlich bewirkt der Hook, dass die Animation ein- und ausgeschaltet und anschließend entsprechend aktualisiert
on
wird. Daher können wir den Status der Animation genau abrufen. Ohne dies würde ad-hoc antwortenduration
.Die Verwendung ist die folgende:
und die animierte Implementierung könnte sein,
quelle