Использование greensock с рулями

Question

У меня есть шаблон, который я сделал с Рулями, который выглядит следующим образом:

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

Я хотел бы использовать библиотеку Greensock для анимации рендеринга студенческих изображений. Из моего понимания greensock, мой код хотелось бы так:

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

Как рендеринга изображений на основе моего шаблона и в то же время цикла через все изображения, чтобы оживить их?

Answer 1

Первое, что вам нужно сделать, это получить шаблон в допустимом состоянии, чтобы он мог скомпилировать. Тег {{#each student}} не имеет закрывающего тега и не имеет никакого смысла, поскольку вы уже имеете объект над students, который предположительно является массивом. Избавьтесь от линии {{#each student}}.

Вы будете отображать свои изображения, скомпилировав ваш шаблон, а затем вызов результирующий метод с аргументом, являющимся объектом данных, содержащим свойство массива students. Предполагая, что вы хотели бы придать свои студент HTML в элемент с id атрибутом «контейнер», необходимый код будет выглядеть следующим образом:

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); 

После того, как новая разметка была добавлена ​​к DOM, мы можем выполните нашу анимацию. Нет необходимости индивидуально добавлять идентичные анимации в наш объект временной шкалы для каждого элемента изображения в нашем контейнере. Greensock УПУ обеспечивает удобный staggerFrom метод, который

Подростков массив мишеней из общего набора назначения дорожит

Нам нужно вызвать этот метод только один раз, передавая селектор CSS, который будет выбрать все элементы изображения в нашем контейнере и ряд в шахматном порядке, что будет количеством секунд между отдельным элементом изображения Tween начинаются:

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

Я создал пример fiddle.