javascript - 如何从NodeList的索引开始应用样式？

我希望在活动“步骤”的右侧逐渐“淡入”元素。我通过遍历NodeList并逐步应用不透明度值来做到这一点。我在重置循环以启动活动步骤时遇到麻烦。 （它的不透明度值应为1）。

笔：https://codepen.io/abenjamin/pen/JgyKGQ

的HTML

<ul class="progress-stepper">
      <li class="step active">
        <p class="step--header">Overview</p>
        <p class="step--description">Iteratively touching base about game changers will make us leaders.</p>
      </li>
      <li class="step">
        <p class="step--header">Payments</p>
        <p class="step--description">Our business impacts markets to intelligently and grow our standard setter.</p>
      </li>
      <li class="step">
        <p class="step--header">Shipping</p>
        <p class="step--description">Globally synergising organic growths is crucial to our wholesale stand-up.</p>
      </li>
      <li class="step">
        <p class="step--header">Returns</p>
        <p class="step--description">Hello world! This is a test.</p>
      </li>
      <li class="step">
        <p class="step--header">Contacts</p>
        <p class="step--description">Hello world! This is a test.</p>
      </li>
    </ul>

JS

function fader(){
  for (i = 0; i < stepCount; i++) {
    let fraction = 1/stepCount;
    let opacityValue = 1-(fraction*i);
    step[i].style.cssText = "opacity:"+opacityValue+";";
    console.log(opacityValue);
  };
};

最佳答案

一种解决方案是将活动步骤引用传递给fader()函数。
考虑以下fader()函数

function fader(start){
  start = start||0;
  let fraction = 1/(stepCount);
  for (i = start; i < stepCount; i++) {
    let opacityValue = 1-(fraction*(i - start));
    step[i].style.cssText = "opacity:"+opacityValue+";";
    console.log(opacityValue);
  };
}

添加了一个start参数，该参数默认为0。
fraction值将是常量，将其从循环中删除。
由于挂钩的起点会有所不同，因此请更新opacityValue以考虑起点


以下是具有更新的fader()功能的Codepen的分支。此外，还对moveStep()进行了更新，以将stepPlace传递给fader()。

https://codepen.io/anon/pen/Eqvwyb

关于javascript - 如何从NodeList的索引开始应用样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57319068/