当转换反转时，可以禁用/更改 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>