[英]Working with Animsition and Infinite Scroll js
I am using infinite scroll js (with behaviour set to twitter) to load in new contents on the index page. 我使用无限滚动js(行为设置为twitter)来加载索引页面上的新内容。 My concern is, how do I re-initiate animistion on the new posts that are being loaded via infinite scroll? 我担心的是,如何重新启动对通过无限滚动加载的新帖子的动画 ? I have described in detail the page structure being followed and would appreciate it very much if anyone can kindly share a solution for the same. 我已经详细描述了所遵循的页面结构,如果有人可以分享相同的解决方案,我将非常感激。
<!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 the JS, 这是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){
});
I was running into this same problem (animsition + infinite scroll) and couldn't find a good answer here on SO or anywhere else for that matter so I performed some minor surgery on the animsition.js source with nice results. 我遇到了同样的问题(animsition +无限卷轴)并且在SO或其他任何地方都没有找到一个好的答案,因此我对animsition.js源进行了一些小手术,效果很好。
If you take a look at line 66 (in the current state) you'll see where animsition is binding to link clicks and inserting the animation. 如果您查看第66行(在当前状态下),您将看到animsition绑定到链接点击并插入动画的位置。
$(options.linkElement).on("click." + namespace, function(event) {
...
}
If we instead use a little Javascript event delegation then we can effectively say "bind to all anchors/links on the page now and in the future". 如果我们改为使用一个小的Javascript事件委托,那么我们可以有效地说“现在和将来绑定到页面上的所有锚点/链接”。 So something like... 所以像......
$("body").on("click." + namespace, options.linkElement, function(event) {
...
});
This is just a hack on my end for now but I'm going to go back later (when I'm not under the gun on a project) to do a proper fork, test, pull request, etc and try to get it into the main project. 这只是我现在的一个黑客攻击,但我稍后会回去(当我不在项目的枪口下)做一个正确的分叉,测试,拉取请求等,并试图让它进入主要项目。 Hope this works for you and anyone else for now though. 希望现在这对你和其他任何人都有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.