取消悬停元素时，在 CSS 中更改动画的过渡速度

Question

我有一个使用列表实现的下拉菜单。子菜单的高度为 0，然后当用户将鼠标悬停在其上时高度会发生变化。

动画的限制是我无法将最大高度设置为自动，所以我将其设置为子菜单永远无法达到的值。

由于传输时间是基于最大高度的，所以我把它放慢到合适的速度，但我想要的是当有人不-悬停甚至让它立即消失。有办法吗？

.menu ul ul{
    float: left;
    padding: 0;
    position: absolute;
    text-align: left;
    width: 274px;
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 1s ease-in;
        -moz-transition: max-height 1s ease-in;
        -o-transition: max-height 1s ease-in;
        -ms-transition: max-height 1s ease-in;
        transition: max-height 1s ease-in;
}

.menu ul li:hover ul, .menu li.over ul {
    max-height: 999px;
}

我想坚持使用 CSS，但我愿意使用 JavaScript。

Answer 1

试试这个：

对于基本 class（不是 :hover），只需定义列表消失时所需的过渡持续时间。

悬停时，定义新的过渡持续时间（列表出现所需的持续时间）。

此处的快速示例：http://codepen.io/AxelCardinaels/pen/wBQZbm

HTML :

<div class="text">Some texte</div>

CSS :

.text{
  background:blue;
  transition:all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
}

.text:hover{
  background:red;
  transition-duration:2s;
}

取消悬停元素时，在 CSS 中更改动画的过渡速度

Change animation's transition speed in CSS when un-hovering element

html

css

animation