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

debugcn 发表于 Dev

理查德·杨（Richard Young）

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

动画的局限性是我不能将max-height设置为auto，因此我将其设置为一个子菜单将无法达到的值。

由于基于最大高度的迁移时间非常快，因此我将其减慢到合适的速度，但是我想让它在有人悬停甚至消失时更快地消失立即消失。有没有办法做到这一点？

.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。

Axel Cardinaels

试试这个：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。