html - 当转换反转时，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

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

所以如果它在返回时等待1秒，你应该在不包含“:悬停”。看似相反，实则不然。

例子

/*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>