交錯的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中文網其他相關文章！