Question

正如你所看到的那样，我对偶数和奇数类型的n应用了延迟，但问题是两者的延迟总是相同的，无论如何。因此，如果我在奇数上放10秒，在偶数上放3秒，那么对于所有链接，它将是10秒。

a {
          position: relative;
          line-height: 200%;
          display: inline-block;
          text-transform: uppercase;
          font-size: $header-link-size;
          transform: scale(0);
          animation: scaleIn .5s;
          animation-fill-mode: both;

          &:nth-of-type(even) {
            animation-delay: 2s;
          }

          &:nth-of-type(odd) {
            animation-delay: 3s;
          }

          @keyframes scaleIn {
            from {
              transform: scale(0);
            }
            to {
              transform: scale(1);
            }
          }
}

Answer 1

nth-of-type() - 选择器将匹配同一父元素内某个类型的第n个子元素（我们谈论兄弟）。它不适用于嵌套元素。因此，对于您的标记，<a>内的每个<li>是唯一的标记，因此它总是奇怪的，动画延迟对所有人来说都是相同的。

您必须选择偶数和奇数<li>元素，并将动画延迟添加到其链接中。

a {
  position: relative;
  line-height: 200%;
  display: inline-block;
  text-transform: uppercase;
  font-size: 1em;
  transform: scale(0);
  animation: scaleIn .5s;
  animation-fill-mode: both
}
li:nth-of-type(even) a {
  animation-delay: 1s
}
li:nth-of-type(odd) a {
  animation-delay: 2s
}
@keyframes scaleIn {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

<ul>
  <li><a class="active" href="">Home</a>
  </li>
  <li><a href="">Portfolio</a>
  </li>
  <li><a href="">About</a>
  </li>
  <li><a href="">Contact</a>
  </li>
</ul>

CSS动画延迟并不适用于所有元素

1 个答案: