Qu'est ce qu'un réagir.js de manière conviviale pour animer une liste de réapprovisionnement?
J'ai une liste d'éléments avec des scores, commandés par les scores, rendu par react.js comme une orientés verticalement liste de la forme rectangulaire des éléments (les scores les plus élevés au top). Plane et autres clics sur les éléments individuels peuvent afficher/masquer des infos supplémentaires, la modification de leur hauteur.
Nouvelle information arrive que les changements les scores, légèrement, rendant certains éléments de rang supérieur et d'autres plus bas après un re-trier. J'aimerais les éléments simultanément animer à leurs nouvelles positions, plutôt que d'apparaître dans leurs nouveaux emplacements instantanément.
Est-il recommandé de le faire dans React.js peut-être avec un populaire add-on?
(Similaire à la dernière situation à l'aide de D3, une technique que j'ai utilisé était à peu près:
- Affichage de la liste avec l'élément DOM nœuds dans leur ordre naturel, avec le positionnement relatif. Avec le positionnement relatif, d'autres petits changements de CSS ou JS-déclenché – aux éléments individuels d'extension des maj d'autres, comme prévu.
- Muter tous les nœuds DOM, en une seule étape, à leur réelle par rapport coordonnées que de nouvelles coordonnées absolues – un DOM changement qui n'entraîne pas de changement de visuel.
- Re-commande de l'élément de nœuds DOM, à l'intérieur de leur parent, pour le nouvel ordre de tri – un autre DOM changement qui n'entraîne pas de changement de visuel.
- Animer tous les nœuds " d'en haut, des compensations à leurs nouvelles valeurs calculées, basées sur les hauteurs de tous les éléments précédents dans la nouvelle commande. C'est la seule visuelle de l'étape active.
- Muter tous les élément de nœuds DOM retour à la non-décalage par rapport de positionnement. Encore une fois, cela ne cause pas de changement visible, mais la maintenant-relativement-positionné des nœuds DOM, dans l'ordre naturel de la liste sous-jacente, va gérer interne hover/développer/etc changements de style avec un bon décalage.
Maintenant, je suis l'espoir d'un effet similaire à une Réaction-ish sorte...)
- vous pouvez regarder la: github.com/chenglou/react-tween-state (je ne l'ai jamais utilisé jusqu'à présent, mais il a été rabotage de nombreuses fois 🙂 )
- En effet, c'est en voyant qui réagissent-tween-état qui m'a rappelé, je me demandais ce que pour un temps, et l'invite à ma question. On dirait qu'il pourrait être utile, avec certains multi-étape hackery comme mon avant D3 approche... mais toujours l'espoir il peut être fortement recommandé/moyen optimisé déjà là, dans la Réagir la communauté.
- Je viens de trouver ce. Il semble que c'est assez proche de ce que vous avez décrit... et il a vraiment une bonne ambiance. MixItUp
- MixItUp est joli!!! Et, très semblable à l'effet visuel, je suis à la recherche pour. (Je l'avais déjà utilisé, et a même acheté une licence pour, Metafizzy similaire Isotope avant de s'installer sur le D3-approche à peu près décrit ci-dessus.) Mais, maintenant, je suis spécifiquement à la recherche d'un Réagir.js (et libre/open source) approche. Dans un sens, la question est: comment faire MixItUp/Isotope-comme des effets dans une Réagir de manière conviviale?
Vous devez vous connecter pour publier un commentaire.
Je viens de publier un module pour s'attaquer à ce problème
https://github.com/joshwcomeau/react-flip-move
Il fait un peu les choses différemment que de la Magie Déplacer /Shuffle:
Découvrez les démos:
http://joshwcomeau.github.io/react-flip-move/examples/#/shuffle
Réagir Shuffle est solide et à jour. Elle est inspirée par Ryan Florences Magie Déplacer démo
https://github.com/FormidableLabs/react-shuffle
Je sais que c'est un peu une vieille question, et vous avez probablement trouvé une solution, mais pour quelqu'un d'autre de venir à travers cette question, consultez le MagicMove bibliothèque par Ryan Florence. C'est une Réagir la bibliothèque pour gérer le scénario exact que vous décrivez: https://github.com/ryanflorence/react-magic-move
Le voir en action: https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424
Edit: C'est cassé à Réagir à 0,14. Voir Réagir Shuffle comme une alternative, comme suggéré par Tim Arney ci-dessous.
La meilleure façon que je peux penser pour accomplir cette sur le dessus de ma tête serait d'abord assurez-vous que vous donnez à chacun de vos éléments clé, comme décrit ici:
http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
Prochaine je voudrais définir CSS3 animation similaire à ceci:
L'animation de listes avec CSS3
Fondamentalement dans votre fonction rendu vous de calculer si l'élément est supposé aller, ReactJS place l'élément où il est supposé être (assurez-vous de donner à chaque élément de la même clé à chaque fois! C'est important de s'assurer ReactJS réutilise votre élément DOM correctement). En théorie au moins, le CSS doit prendre soin du reste de l'animation pour vous à l'extérieur de reactjs/javascript.
Clause de non-responsabilité... je ne l'ai jamais essayé 😉
Je ne voulais pas avoir recours à une tierce partie de la bibliothèque pour mes animations j'ai donc mis en place le "FLIP" technique d'animation à l'aide de Réagir cycle de vie des méthodes getSnapshotBeforeUpdate() et componentDidUpdate().
Lorsque l'élément de liste du accessoires.index des changements de l'ancienne position est capturé dans getSnapshotBeforeUpdate() et dans componentDidUpdate() le css transform: translateY() est appliquée de sorte que l'objet s'animer à partir de l'ancienne position à la position actuelle.
JS:
CSS:
Parce que la position d'un élément dépend fortement de la DOM moteur, je trouve ça vraiment difficile à mettre en œuvre l'interpolation et d'animer de manière pure, au sein de Réagir composants. Si vous voulez le faire proprement, je pense que vous avez besoin d'au moins: un Magasin de tenir la position actuelle de l'élément, un Magasin de tenir la prochaine position d'un élément (ou de la combiner avec la précédente boutique), et une méthode render() qui s'applique le décalage des marges par élément jusqu'à la dernière image, la prochaine postes actuels. Comment calculer le prochain poste en premier lieu est aussi un défi. Mais étant donné que les éléments qu'inverser les positions, vous pouvez utiliser le Magasin avec les positions actuelles de swap élément de #0 à l'élément n ° 1, en échangeant leurs décalages dans le prochain positions Magasin.
À la fin c'est plus facile d'utiliser une bibliothèque externe de manipuler les éléments de la marge après ils sont rendus.
Suffit d'utiliser ReactCSSTransitionGroup.
Il est intégré dans le Réagissent avec les Addons et l'emballage est parfait pour ce cas d'utilisation! Assurez-vous que le composant sur lequel vous appliquez la transition a déjà monté vers les DOM. Utiliser le CSS qui est dans les liens exemple pour une belle décoloration de transition.