交错的CSS过渡

实现元素悬停时的趣味视觉效果，例如移动元素，非常简单。但如果有多个列表项，且希望每个列表项的移动都具有交错的动画时间，该如何实现呢？

以下代码展示了如何通过 transition-delay 属性实现交错动画效果。首先，我们选择每个列表项并应用不同的延迟时间：

@media (hover: hover) {
  .list li a span {
    transform: translateY(100px);
    transition: 0.2s;
  }
  .list:hover span {
    transform: translateY(0);
  }
  .list li:nth-child(1) span {
    transition-delay: 0s;
  }
  .list li:nth-child(2) span {
    transition-delay: 0.05s;
  }
  .list li:nth-child(3) span {
    transition-delay: 0.1s;
  }
  .list li:nth-child(4) span {
    transition-delay: 0.15s;
  }
  .list li:nth-child(5) span {
    transition-delay: 0.2s;
  }
  .list li:nth-child(6) span {
    transition-delay: 0.25s;
  }
}

为了更灵活地控制延迟时间，可以使用 CSS 自定义属性：

@media (hover: hover) {
  .list {
    --delay: 0.05s;
  }
  .list li a span {
    transform: translateY(100px);
    transition: 0.2s;
  }
  .list:hover span {
    transform: translateY(0);
  }
  .list li:nth-child(n) span {
    transition-delay: calc(var(--delay) * (n - 1));
  }
}

这种方法利用 calc() 函数动态计算延迟时间，使代码更简洁，也更易于扩展。 n 代表列表项的序号。

如果列表项数量较多，以上方法可能显得冗余。可以使用 Sass 循环生成代码：

@media (hover: hover) {
  .list li a span {
    transform: translateY(100px);
    transition: 0.2s;
  }
  .list:hover span {
    transform: translateY(0);
  }
  @for $i from 0 through 20 {
    .list li:nth-child(https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$i   1}) span {
      transition-delay: 0.05s * $i;
    }
  }
}

此 Sass 代码循环生成 21 个列表项的 transition-delay 属性，即使列表项少于 21 个，多余的代码也会在 gzip 压缩后被有效地减小。

最后，还可以从 HTML 中传递延迟值：

<!-- HTML 结构示例 -->

• This
• Little

@media (hover: hover) {
  .list li a span {
    transform: translateY(100px);
    transition: 0.2s;
  }
  .list:hover span {
    transform: translateY(0);
    transition-delay: var(--delay); /* 从 HTML 中获取延迟值 */
  }
}

选择哪种方法取决于项目的具体需求和个人偏好。 Sass 循环方法在可维护性和可扩展性方面具有优势，而自定义属性方法则更简洁灵活。 直接在HTML中设置也方便，但可能不太利于维护。

以上是交错的CSS过渡的详细内容。更多信息请关注PHP中文网其他相关文章！