我正在使用无限滚动 js(行为设置为 twitter)在索引页面上加载新内容。我担心的是，如何重新启动 animistion在通过无限滚动加载的新帖子上？我已经详细描述了所遵循的页面结构，如果有人可以分享相同的解决方案，我将不胜感激。
<!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){
});
最佳答案
我遇到了同样的问题(动画 + 无限滚动)并且在 SO 或其他任何地方都找不到好的答案，所以我对 animsition.js source 进行了一些小手术。结果不错。
如果您查看第 66 行(在当前状态下)，您会看到 animsition 在何处绑定(bind)到链接点击并插入动画。
$(options.linkElement).on("click." + namespace, function(event) {
...
}
如果我们改用一点 Javascript event delegation然后我们可以有效地说“现在和将来绑定(bind)到页面上的所有 anchor /链接”。所以像...
$("body").on("click." + namespace, options.linkElement, function(event) {
...
});
这只是我这边的一个黑客，但我稍后会回去(当我不在项目的 Guzzle 下时)做一个适当的 fork 、测试、拉取请求等，并尝试把它放到主项目中。不过，希望这对您和其他任何人都适用。
关于javascript - 使用 Animsition 和 Infinite Scroll js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29859134/