5

インデックスページに新しいコンテンツをロードするために、無限スクロール 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){

});
4

1 に答える 1

0

私はこの同じ問題 (アニメーション + 無限スクロール) に遭遇していましたが、ここで SO や他の場所で良い答えを見つけることができなかったので、animsition.js ソースでいくつかの小さな手術を行い、良い結果を得ました。

66 行目 (現在の状態) を見ると、アニメーションがリンク クリックにバインドされ、アニメーションが挿入されている場所がわかります。

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

代わりに、小さなJavascript イベント委譲を使用すると、「現在および将来のページ上のすべてのアンカー/リンクにバインドする」と効果的に言うことができます。だから何か...

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

これは今のところ私の側の単なるハックですが、後で（プロジェクトで銃の下にいないときに）戻って、適切なフォーク、テスト、プルリクエストなどを行い、それを取得しようとしますメインプロジェクト。ただし、これが今のところあなたと他の誰かに役立つことを願っています.

于 2015-07-24T17:16:35.020 に答える