反轉時如何防止轉換延遲

Question

我有一個<div> ，我想在hover時將其width和height加倍。
但我希望先轉換width ，然后轉換height 。
並且在反轉（鼠標移出）時，我希望首先轉換height ，然后轉換height 。
（只是復雜過渡的一個縮影，以證明問題）

 .box { background-color: pink; width: 100px; height: 100px; transition: width 1s 1s, height 1s 0s; }.box:hover { width: 200px; height: 200px; transition-delay: 0s, 1s; }

 <.DOCTYPE html> <html lang="en"> <head> <title>Home</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="styles.css" /> <script type="module" src="script.js"></script> </head> <body> <div class="box"></div> </body> </html>

在上面的例子中，如果我在轉換height時移除鼠標，一切正常。
但是如果我在轉換width時移除鼠標，我必須等待1s ，這是height部分的transition-duration （實際上是由於transition-delay ），然后width的反向轉換開始，這會導致在轉換隊列時出現可怕的結果很復雜。
反之亦然，如果我在向后轉換height時再次hover元素，我必須等待1s秒才能看到height動畫，因為1s延遲。 我希望在移除鼠標后立即看到width向后過渡。

下面是一個復雜的轉換隊列示例： CSS 漸變霓虹按鈕，帶有 hover 效果

有什么方法可以通過 CSS 轉換來防止這個問題？

Answer 1

一個技巧是通過使用 max-width 和 min-height 來避免轉換延遲，因此 width 和 height 將同時運行。

您將寬度 go 設置為400px但最大200px為 200 像素，高度應從 0 開始，最小高度為100px 。 就像每個屬性將在轉換的一半時被阻塞，這將模擬延遲：

 .box { background-color: pink; width: 100px; height: 0; max-width: 200px; min-height: 100px; transition: 2s; }.box:hover { width: 400px; height: 200px; }

 <div class="box"></div>

Answer 2

<script>
  function bigImg(x) {
    x.style.height = "200px";
    x.style.width = "200px";
  }

  function normalImg(x) {
    x.style.height = "100px";
    x.style.width = "100px";
  }
</script>
<div class="box" onmouseover="bigImg(this)" onmouseout="normalImg(this)"></div>

然后完全刪除.box:hover css

反轉時如何防止轉換延遲

問題描述

1 個解決方案

解決方案1
0 2022-09-01 00:53:56

解決方案2
-1 2022-09-01 00:53:46

反轉時如何防止轉換延遲

問題描述

1 個解決方案

解決方案1 0 2022-09-01 00:53:56

解決方案2 -1 2022-09-01 00:53:46

解決方案1
0 2022-09-01 00:53:56

解決方案2
-1 2022-09-01 00:53:46