Geek Answers Handbook

Work with Animsition and Infinite Scroll js

I use js infinite scroll (with behavior set to twitter) to load new content on the index page. My concern is, how do I re-initiate animistion on new messages that load through endless scrolling? I described in detail the structure of the page and carefully evaluated it if someone could kindly share a solution for it.

<!DOCTYPE html> <html lang="en"> <head></head> <body> <div class="animsition"> <header class="header"></header> <main class="main"> <section class="main-body"> <div id="infinite-scroll"> <article class="post"> <div class="post-body"> <h2 class="post-title"> <a href="" class="nav-link" title=""></a> <h2> </div> </article> </div> <div class="pagination"> <a href="" class="next">Load Older Items</a> </div> </section> </main> <footer class="footer"></footer> </div> </body> </html>

And here is JS,

 $(".animsition").animsition({ inClass : 'fade-in', outClass : 'fade-out', linkElement : '.nav-link', overlay : false }); $(function() { $("#infinite-scroll").infinitescroll({ navSelector: ".pagination", nextSelector: ".next", itemSelector: ".post", behavior: "twitter" }, function(newElements){ });
+5
source share
1 answer

I ran into this problem (animation + infinite scrolling) and could not find a good answer here on SO or anywhere else, so I did a little operation on the animsition.js source with good results.

If you look at line 66 (in the current state), you will see where the animation is attached to click links and insert animation.

 $(options.linkElement).on("click." + namespace, function(event) { ... }

If we instead use a small delegation of Javascript events , then we can effectively say "bind to all anchors / links on the page now and in the future." So something like ...

 $("body").on("click." + namespace, options.linkElement, function(event) { ... });

At the moment it’s just hacking my end, but I’m going to come back later (when I'm not under the gun in the project) to make the correct fork, check, pull out the request, etc. and try going to the main project. Hope this works for you and for someone else, though now.

0
source

More articles:


All Articles