取消悬停元素时在 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

试试这个：

对于基类（而不是：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;
}