Le délai de transition des CSS peut-il être désactivé/modifié pour l'inversion de la transition ?

Question

J'essaie actuellement de créer une sorte de menu déroulant. L'idée est que lorsque vous le survolez, la largeur augmente et 0,5s plus tard la hauteur augmente. Cependant, le délai s'applique également à la partie "rollback" de la transition, ce qui gâche tout. Je me demandais donc s'il était possible de modifier le délai pour que la hauteur revienne avant la largeur.

CODE :

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

Oui, c'est possible. Il suffit de définir les effets de transition avec l'action qui se produira.

S'il veut bien attendre 1 seconde sur la déclaration, vous devez écrire " transition-delay: 1s "à la classe qui ne contient pas " :hover ". On dirait que c'est le contraire de l'autre, mais c'est vrai.

Exemple

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