Lavorare con Animsition e Infinite Scroll js

Sto usando infinito scroll js (con comportamento impostato su twitter) per caricare nuovi contenuti nella pagina indice. La mia preoccupazione è, come posso riavviare animistion sui nuovi post che vengono caricati tramite scroll infinito? Ho descritto in dettaglio la struttura della pagina che viene seguita e apprezzerei molto se qualcuno può gentilmente condividere una soluzione per lo stesso.Lavorare con Animsition e Infinite Scroll 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>

Ed ecco la 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){ 

});

fonte

2015-04-24 Dhruba

stavo correndo in questo stesso problema (animsition + scroll infinito) e non riusciva a trovare una buona risposta qui su SO o in qualsiasi altro luogo per quella materia quindi ho eseguito un piccolo intervento chirurgico su animsition.js source con buoni risultati.

Se dai un'occhiata alla riga 66 (nello stato corrente) vedrai dove la animsizione è vincolante per collegare i clic e inserire l'animazione.

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

Se invece utilizziamo un po Javascript event delegation allora possiamo effettivamente dire "si legano a tutte le ancore/link sulla pagina, ora e in futuro". Quindi, qualcosa di simile ...

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

questo è solo un hack sulla mia estremità per ora, ma ho intenzione di tornare più tardi (quando non sono sotto la pistola su un progetto) per fare una forchetta corretta , prova, richiama la richiesta, ecc. e prova a farlo entrare nel progetto principale. Spero che questo funzioni per te e per chiunque altro per ora.

fonte

2015-07-24 17:16:35 Southerneer

Lavorare con Animsition e Infinite Scroll js

risposta

Problemi correlati