Question

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

动画的限制是我无法将最大高度设置为自动，因此我将其设置为一个不太可能达到子菜单的值。

由于tranistion时间是基于最大高度是非常快，所以我把它减慢到合适的速度，但我喜欢的是当它有人消失时更快不要徘徊，甚至立即消失。有没有办法做到这一点？

.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

试试这个：

对于基本类（不是：悬停），只需定义列表消失时所需的转换持续时间。

在悬停时，定义新的转换持续时间（列表显示的持续时间）。

快速例子：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中更改动画的转换速度

1 个答案: