Question

我使用无限滚动js（行为设置为twitter）来加载索引页面上的新内容。我担心的是，如何重新启动animistion通过无限滚动加载的新帖子？我已经详细描述了所遵循的页面结构，如果有人可以分享相同的解决方案，我将非常感激。

return{
  restrict: "E",
  transclude: "element",
  priority: 10,
  compile: function(tElem, tAttrs){
    var template = "\
      <div class='some-directive'>\
        <div class='some-directive-header'>My custom component</div>\
        <div class='some-directive-body' ng-transclude></div>\
      </div>";

    tElem.replaceWith(template);
  }
};

这是JS，

<!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>

Answer 1

我遇到了同样的问题（animsition +无限卷轴）并且在SO或其他地方无法找到一个好的答案，因此我对animsition.js source进行了一些小手术并取得了不错的效果。

如果您查看第66行（在当前状态下），您将看到animsition绑定到链接点击并插入动画的位置。

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

如果我们改为使用一点Javascript event delegation，那么我们可以有效地说“现在和将来绑定到页面上的所有锚点/链接”。所以......就像......

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

这只是我现在的一个黑客攻击，但是我会稍后回去（当我不在项目的枪口下）做一个正确的分叉，测试，拉取请求等等并尝试进入主项目。希望现在这对你和其他任何人都有效。

使用Animsition和Infinite Scroll js

1 个答案: