Ich schreibe eine einfache "Konsole", die Nachrichten chatähnlich anzeigt. Die Nachrichten erscheinen von unten und bewegen sich nach oben.
Ich habe den Arbeitscode, aber ich möchte die erscheinenden Nachrichten animieren, indem ich den Container jedes Mal nach unten scrolle, wenn ein neues "li" hinzugefügt wird.
Aktueller Code:
%Vor% Das Property messages stammt von der übergeordneten Komponente und dem Speicher.
Ich habe dieses Geschwindigkeits-Plugin gefunden: Ссылка und ich kann nicht herausfinden, wie ich es in meiner Situation anwenden kann . Alle Beispiele scheinen nicht zu gelten (oder vielleicht verstehe ich sie einfach nicht).
Ich bin ziemlich neu zu reagieren und einige Konzepte verwirren mich immer noch, also bitte verstehe.
Ich möchte jQuery nicht verwenden.
Das velocity-react Plugin bietet bereits implementierte React-Komponenten für die Verwendung von Velocitys Animationen.
Ich denke, dass die Scroll-Funktionalität auch über Animationen implementiert werden kann, aber die Velocity-Bibliothek hat den Scroll-Befehl . Ich habe das velocity-react Plugin erkannt und es stellt eine Schnittstelle (Komponenten) für die Animationen zur Verfügung. Es gibt keine Unterstützung für die Velocity-Befehle.
Es ist ziemlich einfach Velocity-Befehle in React zu verwenden. Ich habe react-velocity-scroll repo basierend auf deiner Frage erstellt und es gibt eine Live-Demo von sending / Nachrichten in einer Chat-ähnlichen Weise auflisten.
Bitte beachten Sie, dass die Velocity-Bibliothek im Beispiel über das velocity-react-Plugin enthalten ist. Es wird empfohlen, das Plugin für zukünftige fortgeschrittene Animationen zu verwenden, da es bereits implementierte React-Komponenten für die Verwendung der Velocity-Animationen bietet. Das Repo verwendet jedoch keine Animationen. Es verwendet nur den Scroll-Befehl der Velocity-Bibliothek. Wenn Sie bevorzugen - Sie können Velocity-Bibliothek unabhängig importieren.
Aber hier sind meine Komponenten. Bitte konzentrieren Sie sich auf die Komponente MessageItem - sobald eine neue Nachricht hinzugefügt wurde, scrollen Sie nach unten.
App
%Vor%Nachrichtenliste
%Vor%Nachrichtenelement
%Vor%Tags und Links javascript animation reactjs velocity.js