Question

我已经习惯了使用Handlebars和JSON。我创建了一个基本的手柄模板，并使用getJSON来加载JSON文件数据。数据显示正常，但我也使用gsap进行转换，但这不起作用。我尝试将Gulp用于本地服务器，但它仍然无法正常工作。但是，当数据不在外部JSON文件中时，gsap在任何浏览器中都没有问题。我应该以另一种方式加载JSON吗？感谢您的帮助，下面的摘要如下。

HTML：

  <script type="text/x-handlebars-template" id="example-template">
    {{#each exampleData}}
    <div>
      <div>
          <img data-img src="{{imgSource}}" title="{{imageName}}" /> 
        </div>
        <div>
          <h2 class="title-text">{{title}}</h2>
        </div>
      </div>  
    {{/each}}
  </script>

JS：

$(document).ready(function(){

  var template = $('#example-template').html();

  var exampleCompile = Handlebars.compile(template);

  $.getJSON('data/test-data.json', function(result){
      $('#container').html(exampleCompile(result));
  });

});

$(function(){

  var imageTransition = new TimelineMax();
  imageTransition
    .staggerFrom('[data-img]', 1, { y: 100 }, 0.25);

  var titleTransition = new TimelineMax();
  titleTransition
    .fromTo('.title-text', 1, {yPercent: -20, autoAlpha: 0, scale: 0.8},{yPercent: 0, display: 'block', autoAlpha: 1, scale: 1, ease: Power4.easeIn}, '0'); 

});

JSON：

{
"exampleData": [
  {
    "imgSource": "https://s3.amazonaws.com/example-json-data/can.svg",
    "imageName": "can1",
    "title": "Can 1"
  },
  {
    "imgSource": "https://s3.amazonaws.com/example-json-data/can.svg",
    "imageName": "can2",
    "title": "Can 2"
  }
 ]
}

动画转换不适用于Handlebars中的外部JSON数据

0 个答案: