Dhr*_*uba 5 javascript infinite-scroll animsition jquery-infinite-scroll
我使用无限滚动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) {
...
});
目前这只是我的一个黑客行为，但我稍后会回去（当我不在项目的枪口下时）进行适当的分叉、测试、拉取请求等，并尝试将其放入主要项目。希望这对你和其他人现在都有效。