[英]Working with Animsition and Infinite Scroll js
我使用无限滚动js(行为设置为twitter)来加载索引页面上的新内容。 我担心的是,如何重新启动对通过无限滚动加载的新帖子的动画 ? 我已经详细描述了所遵循的页面结构,如果有人可以分享相同的解决方案,我将非常感激。
<!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>
这是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){
});
我遇到了同样的问题(animsition +无限卷轴)并且在SO或其他任何地方都没有找到一个好的答案,因此我对animsition.js源进行了一些小手术,效果很好。
如果您查看第66行(在当前状态下),您将看到animsition绑定到链接点击并插入动画的位置。
$(options.linkElement).on("click." + namespace, function(event) {
...
}
如果我们改为使用一个小的Javascript事件委托,那么我们可以有效地说“现在和将来绑定到页面上的所有锚点/链接”。 所以像......
$("body").on("click." + namespace, options.linkElement, function(event) {
...
});
这只是我现在的一个黑客攻击,但我稍后会回去(当我不在项目的枪口下)做一个正确的分叉,测试,拉取请求等,并试图让它进入主要项目。 希望现在这对你和其他任何人都有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.