Verwenden GreenSock mit Lenker

Question

Ich habe eine Vorlage ich mit Lenker gefertigt, die wie folgt aussieht:

<script type="text/x-handlebars-template" id="student-template"> 
     {{#students}} 
      <div class="clearfix"> 
      {{#each student}} 
       <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
       <img src="{{imgSource}}" title="{{studentName}} /> 
       </div> 
      </div> 
     {{/students}} 
    </script> 

Ich möchte Greensock Bibliothek verwenden, um die Wiedergabe der Schüler Bilder zu animieren. Von meinem Verständnis über GreenSock, würde mein Code wie folgt erhalten:

var timeline = new TimelineLite(); 
timelime.add(TweenLite.from($currentImage, 1, {y: 100})); 
timelime.add(TweenLite.from($nextImage, 1, {y: 100})); 
timelime.add(TweenLite.from($nextnextImage, 1, {y: 100})); 
.. and so on for all images.. 

Wie machen wir Bilder auf der Grundlage meiner Vorlage und zugleich Schleife durch alle Bilder, um sie zu animieren?

Answer 1

Das erste, was Sie tun müssen, ist, Ihre Vorlage in einen gültigen Zustand zu bringen, damit sie kompilieren kann. Das {{#each student}}-Tag hat kein schließendes Tag und macht keinen Sinn, da Sie sich bereits über ein Objekt befinden, das vermutlich ein Array ist. Befreien Sie sich von der {{#each student}} Linie.

Sie werden Ihre Bilder rendern, indem Sie Ihre Vorlage kompilieren und dann die resultierende Methode mit einem Argument aufrufen, das ein Datenobjekt mit einer Array-Eigenschaft ist. Angenommen, Sie möchten, dass Ihre Studenten HTML in ein Element injizieren mit einem id Attribut „Container“, würde der erforderliche Code wie folgt aussehen:

var raw_template = document.getElementById('student-template').innerHTML; 
var template = Handlebars.compile(raw_template); 

var data = { 
    students: [ 
     { 
      imgSource: 'https://placekitten.com/g/120/120', 
      studentName: 'John Doe' 
     }, 
     { 
      imgSource: 'https://placekitten.com/g/120/120', 
      studentName: 'Jane Doe' 
     } 
    ] 
}; 

document.getElementById('Container').innerHTML = template(data); 

Sobald das neue Markup auf das DOM hinzugefügt wurde, können wir Führe unsere Animation aus. Es ist nicht notwendig, für jedes Bildelement in unserem Container einzeln identische Animationen zu unserem Zeitachsenobjekt hinzuzufügen. Die Greensock API hat stellt eine bequeme staggerFrom Methode, die

Tweens ein Array von Zielen aus einem gemeinsamen Satz von Zielwerten

Wir müssen nur einmal diese Methode aufrufen, einen CSS-Selektor vorbei, die alle wählt Bildelemente im Behälter und eine taumeln Zahl, die die Anzahl der Sekunden zwischen den einzelnen Bildelement Tween sein beginnt:

var timeline = new TimelineLite(); 
timeline.staggerFrom('#Container img', 1, { y: 100 }, 0.25); 

ich habe ein Beispiel fiddle erstellt.