react-infinite
react-infinite copied to clipboard
seatgeek
Animations
Using react-infinite with the ReactCSSTransitionGroup results in the current buffer repeating when scrolling. Not quite sure why this happens. If anyone has ideas for a fix I'd love to hear it! Thanks!
If anyone knows how to add animation support to react-infinite it would be appreciated! I've opened a bounty on bountysource for anyone interested.
Hey. I'm new to Infinite and not an expert, but I'm running into the same issue.
My guess is that you're using ReactCSSTransitionGroup as a the only direct child of Infinite Therefore Infinite considers the wrapper of ReactCSSTransitionGroup (which defaults as <span>) as the only element in the list.
I haven't tested this but I guess one way of making this work is encapsulating every element of the Infinite component in its own ReactCSSTransitionGroup, and using transitionAppear to trigger an animation when a new element in your list is mounted the DOM.
I don't know what performance implications that might have, it's probably a bad idea.
@dbismut gave your suggestion a try: the end result is that your css transitions are applied to all elements as they enter/leave the DOM simply via scrolling. This is almost never the desired result.
I am interested in taking up this bounty. What kind of animation is needed? Should the first item in the newly loaded page move to the top of the container?
@hammadfauz I believe the idea would be to somehow get ReactCSSTransitionGroup to work more nicely with this lib, rather than bake in a particular animation