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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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?
InformationsquelleAutor gojomo | 2014-11-29