Question

我有一系列div，我想将它们的宽度从0％设置为另一个％（定义为数据属性＆＃34;数据填充＆＃34;）以模拟进度条。当进度条滚动到视口时，我使用滚动魔术来触发此动画。

我能够让一个人工作，然后尝试创建一个for循环来动画所有的div，但现在当我传入[i]而不是[0]它不再有效。世界上所有的console.logging都没有帮助我没有控制台错误。

我的JS是：

//store all matching divs in an array
var animateProgress = document.getElementsByClassName("progress-bar-progress");

//loop through array to animate each div 
for (var i = 0; i < animateProgress.length; i++) {
    var animateProgressBar = document.getElementsByClassName("progress-bar-progress")[i];
    var animPercent = animateProgressBar.getAttribute('data-fill');

   var scene = new ScrollMagic.Scene({
       triggerElement: animateProgressBar, 
       triggerHook: 0.9
   })
   .on("enter", function () {
      // trigger animation by changing inline style.\
      console.log(animPercent);
      animateProgressBar.style.width = animPercent;
    })
   .addIndicators({
      name: "Progress Start"
   })
  .addTo(controller);
}

我的div看起来都一样：

<div class="progress-bar-wrap">
   <div class="progress-bar"></div>
   <div data-fill="81%" class="progress-bar-progress"></div>
</div>

使用＆＃39;进度条＆＃39;和进步条进展＆＃39;两者都绝对位于相对定位的进度条包裹内

如果我删除循环并在此处将i更改为0：var animateProgressBar = document.getElementsByClassName（＆＃34; progress-bar-progress＆＃34;）[i];它适用于那个div。

我尝试在plunker上重新创建帮助调试：https://plnkr.co/edit/xOo8guXt02ROXnw5PThg

提前致谢！

使用Scroll Magic和＆amp ;;动画多个元素。循环

0 个答案: