文章/答案/技术大牛

发布

问使用动画和无限滚动js
EN

Stack Overflow用户

提问于 2015-04-25 07:26:14

回答 1查看 724关注 0票数 5

我正在使用无限滚动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){

});

javascript

infinite-scroll

animsition

jquery-infinite-scroll

回答 1

Stack Overflow用户

发布于 2015-07-25 01:16:35

我遇到了同样的问题(动画+无限滚动)，在这里或其他地方找不到好的答案，所以我在animsition.js source上做了一些小手术，结果很好。

如果你看一下第66行(在当前状态下)，你会看到animsition绑定到链接点击和插入动画的位置。

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

如果我们使用一个小的Javascript event delegation，那么我们可以有效地说“绑定到页面上现在和将来的所有锚/链接”。所以像这样的东西。

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

这只是我现在的一个技巧，但我会在以后(当我不是在项目中的时候)回去做一个适当的分支，测试，拉请求，等等，并尝试把它放到主项目中。不过，希望这对你和其他人都有效。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29859134

复制

相似问题

问使用动画和无限滚动js
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用动画和无限滚动jsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用动画和无限滚动js
EN