当转换反转时，可以禁用/更改 CSS 的转换延迟吗？

Question

我目前正在尝试制作各种下拉菜单。 这个想法是，当你悬停它时，宽度增加，0.5 秒后高度增加。 然而，延迟也适用于转换的“回滚”部分，破坏了一切。 所以我想知道是否有可能改变延迟，以便高度在宽度之前恢复。

代码：

 /*General NOT IMPORTANT*/ * { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: black; } /*dropdown menu*/ .drop-down { height: 50px; width: 50px; display: flex; align-items: center; transition-property: height, width; transition-duration: 500ms, 500ms; transition-delay: 500ms, 0ms; } .droplist { height: 50px; width: 50px; display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: 50% 50% 10% 10%; transition-property: width, height, background-color; transition-duration: 500ms, 500ms, 0ms; transition-delay: 0ms, 500ms, 500ms; } .lidiv { height: 50px; width: 50px; display: flex; align-items: center; overflow: hidden; } .li:first-child { background-color: #6830b5; border-radius: 10%; } .li:nth-child(2) { margin-top: -50px; } .lidiv, .li:first-child { transition: width 500ms, border-radius 500ms; } .drop-down:hover .droplist, .drop-down:hover { height: 250px; } .drop-down:hover .droplist { border-radius: 4%; background-color: #f7f7f7; } .drop-down:hover .li:first-child, .droplist { border-radius: 4% 4% 0 0; } .drop-down:hover .droplist, .drop-down:hover .lidiv, .drop-down:hover { width: 250px; }

 <navbar class="drop-down"> <ul class="droplist"> <li class="li"> <div class="lidiv"> <h1> A </h1> </div> </li> <li class="li"> <div class="lidiv"> </div> </li> <li class="li"> <div class="lidiv"> </div> </li> <li class="li"> <div class="lidiv"> </div> </li> <li class="li"> <div class="lidiv"> </div> </li> </ul> </navbar>

Answer 1

是的，这是可能的。 您只需要定义将发生的动作的过渡效果。

因此，如果它在返回时等待1 秒，您应该将“ transition-delay: 1s ”写入不包含“ :hover ”的类。 它看起来与另一个相反，但实际上是这样。

例子

 /*General NOT IMPORTANT*/ * { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: black; } /*dropdown menu*/ .drop-down { height: 50px; width: 50px; display: flex; align-items: center; transition-property: height, width; transition-duration: 500ms, 500ms; transition-delay: 1000ms, 0ms; } .drop-down:hover { transition-delay: 500ms, 0ms; } .droplist { height: 50px; width: 50px; display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: 50% 50% 10% 10%; transition-property: width, height, background-color; transition-duration: 500ms, 500ms, 0ms; transition-delay: 0ms, 500ms, 500ms; } .lidiv { height: 50px; width: 50px; display: flex; align-items: center; overflow: hidden; } .li:first-child { background-color: #6830b5; border-radius: 10%; } .li:nth-child(2) { margin-top: -50px; } .lidiv, .li:first-child { transition: width 500ms, border-radius 500ms; } .drop-down:hover .droplist, .drop-down:hover { height: 250px; } .drop-down:hover .droplist{ border-radius: 4%; background-color:#f7f7f7; } .drop-down:hover .li:first-child, .droplist{ border-radius: 4% 4% 0 0; } .drop-down:hover .droplist, .drop-down:hover .lidiv, .drop-down:hover{ width: 250px; }

 <navbar class="drop-down"> <ul class="droplist"> <li class="li"> <div class="lidiv"> <h1> A </h1> </div> </li> <li class="li"> <div class="lidiv"> </div> </li> <li class="li"> <div class="lidiv"> </div> </li> <li class="li"> <div class="lidiv"> </div> </li> <li class="li"> <div class="lidiv"> </div> </li> </ul> </navbar>