反转时如何防止转换延迟

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