SCSS循环 - 存储变量并在另一个循环中再次使用

Question

在我的第一个SCSS循环中，$ i正在计算。 第二个循环用于单独的不同UL列表。

理想情况下，第二个循环应该在第一个循环结束后开始。我能想到的一种方法是从第一个$ i中获取值，并将其用作第二个循环中的延迟。

上述情况可能吗？

第一次UL循环。

&__menu-item {

  // Stagger animations by increasing the delay for the first 20 items
  @for $i from 1 through 20 {
    &:nth-child(#{$i}) {
      animation: fade-in-down 0.4s linear 0.1s + ($i * 0.1);
      animation-fill-mode: backwards;
    }
  }
}

第二次UL循环。

&__social-item {

  // Stagger animations by increasing the delay for the first 20 items
  @for $i from 1 through 20 {
    &:nth-child(#{$i}) {
      animation: fade-in-down 0.4s linear 0.1s + ($i * 0.1);
      animation-fill-mode: backwards;
    }
  }
}

示例

第一个循环中有7个项目。因此，第二个循环应该在0.7秒后开始。

animation: fade-in-down 0.4s linear 0.7s + ($i * 0.1);

Answer 1

您的javascript选项如下所示。其余的可以在css中完成，只需离开animation-delay即可。

• 获取物品
• 环
• 计算时间
• 在项目上添加内联

var items = document.querySelectorAll('.menu-item, .social-item');

items.forEach(function(currentValue, currentIndex) {
 let time = 0.1 + (currentIndex * 0.1);
 
 currentValue.style.animationDelay = time + 's';
 
 console.log(currentValue.style.animationDelay);
});

<div class="menu-item">1</div>
<div class="menu-item">2</div>
<div class="menu-item">3</div>
<div class="menu-item">4</div>
<div class="menu-item">5</div>
<div class="menu-item">6</div>
<div class="menu-item">7</div>

<div class="social-item">1</div>
<div class="social-item">2</div>
<div class="social-item">3</div>
<div class="social-item">4</div>
<div class="social-item">5</div>
<div class="social-item">6</div>
<div class="social-item">7</div>