使用Animsition和Infinite Scroll js

Question

我使用無限滾動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){

});

Answer 1

我遇到了同樣的問題（animsition +無限卷軸）並且在SO或其他任何地方都沒有找到一個好的答案，因此我對animsition.js源進行了一些小手術，效果很好。

如果您查看第66行（在當前狀態下），您將看到animsition綁定到鏈接點擊並插入動畫的位置。

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

如果我們改為使用一個小的Javascript事件委托，那么我們可以有效地說“現在和將來綁定到頁面上的所有錨點/鏈接”。 所以像......

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

這只是我現在的一個黑客攻擊，但我稍后會回去（當我不在項目的槍口下）做一個正確的分叉，測試，拉取請求等，並試圖讓它進入主要項目。 希望現在這對你和其他任何人都有效。

使用Animsition和Infinite Scroll js

問題描述

1 個解決方案

解決方案1
0 2015-07-24 17:16:35

使用Animsition和Infinite Scroll js

問題描述

1 個解決方案

解決方案1 0 2015-07-24 17:16:35

解決方案1
0 2015-07-24 17:16:35