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

Question

我希望将元素逐渐“淡化”到事件“步骤”的右侧。我通过遍历 NodeList 并递增地应用不透明度值来做到这一点。我在重置循环以从 active 步骤开始时遇到问题。 (它的不透明度值应该为 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);
  };
};

Answer 1

一种解决方案是将事件步骤引用传递给 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);
  };
}

1. 添加了一个 start 参数，默认为 0。
2. fraction 值将保持不变，将其从循环中移除。
3. 由于 loob 的起点会有所不同，因此更新了 opacityValue 以考虑起点

下面是带有更新的 fader() 函数的 codepen 的分支。此外还更新了 moveStep()，以便在计算完成后将 stepPlace 传递给 fader()。

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