反转时如何防止转换延迟
[英]How to prevent transition-delay when reversd
问题描述
I have a <div> , I want to double its width and height when hover .
我有一个<div> ，我想在hover时将其width和height加倍。
But I want the width to be transitioned first and then height .但我希望先转换width ，然后转换height 。
And when reversing (mouse moved out), I want the height to be transitioned first, then height .并且在反转（鼠标移出）时，我希望首先转换height ，然后转换height 。
(Just an epitome of complex transitions, to demonstrate the issue) （只是复杂过渡的一个缩影，以证明问题）
.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>
In the example above, if I remove the mouse when transitioning height , everything is OK.在上面的例子中，如果我在转换height时移除鼠标，一切正常。
But if I remove the mouse when transitioning width , I have to wait 1s which is the transition-duration of height part (actually because of the transition-delay ) before the reverse transition of width starts, which leads to awful result when the transition queue is complex.但是如果我在转换width时移除鼠标，我必须等待1s ，这是height部分的transition-duration （实际上是由于transition-delay ），然后width的反向转换开始，这会导致在转换队列时出现可怕的结果很复杂。
Vice versa, if I hover the element again when transitioning height backwards, I have to wait for 1s until I can see height animating, because of the 1s delay.反之亦然，如果我在向后转换height时再次hover元素，我必须等待1s秒才能看到height动画，因为1s延迟。 I'm expecting to see width transitioning backwards immediately after I remove the mouse.我希望在移除鼠标后立即看到width向后过渡。
Here is an example of a complex transition queue: CSS Gradient neon button with hover effect下面是一个复杂的转换队列示例： CSS 渐变霓虹按钮，带有 hover 效果
Is there any way to prevent the problem just by CSS transitions?有什么方法可以通过 CSS 转换来防止这个问题？
1 个解决方案
解决方案1
0 2022-09-01 00:53:56
One trick is to avoid transition-delay by playing with max-width and min-height so both width and height will run at the same time.一个技巧是通过使用 max-width 和 min-height 来避免转换延迟，因此 width 和 height 将同时运行。
You make the width go to 400px but with a max-width of 200px and height should start at 0 with a min-height of 100px .您将宽度 go 设置为400px但最大200px为 200 像素，高度应从 0 开始，最小高度为100px 。 Like that each property will get blocked at half the transition which will simulate the delay:就像每个属性将在转换的一半时被阻塞，这将模拟延迟：
.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>
解决方案2
-1 2022-09-01 00:53:46
<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>
and then simply remove the .box:hover css completely然后完全删除.box:hover css
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.