Question

我尝试将该代码放在#subnavlist li上，但它无法正常工作。基本上我试图延迟悬停高度

 height: 0;
-webkit-transition: height 200ms ease-in;
-moz-transition: height 200ms ease-in;
-o-transition: height 200ms ease-in;
transition: height 200ms ease-in;

Answer 1

＆＃13;

* { padding:0; margin:0; }
li { list-style: none: list-type: none; }
li div { max-height:0; overflow:hidden; background: #000; color: #fff;
  transition: all 0.2s ease-in-out;
}
li span { display: block; padding: 4px; font-weight: bold; color: #fff; background: #000;}
li span:hover + div {
    max-height: 400px;
}

＆＃13;

<ul>
  <li>
    <span>Something</span>
    <div>
      Some content <br>
      Some content <br>
      Some content <br>
      Some content <br>
      Some content <br>
    </div>
</ul>

＆＃13;

转换需要定义的开始和定义的结束状态。您没有定义的结束高度（未定义auto），因此您无法从height:0过渡到height:auto

您的JSFiddle也不包含任何高度转换代码。

对您而言，解决方法是使用max-height并将其从0转换为适度大的值。

Answer 2

使用CSS过渡属性transition-delay;

这解决了您的问题：http://jsfiddle.net/cdxbk443/

或没有动画：http://jsfiddle.net/vd9qz3xs/

要延长延迟时间，只需在transition-delay的{{1}}属性上再添加几秒钟。

ul#subnavlist

Answer 3

您想要添加transition-delay属性。 https://css-tricks.com/almanac/properties/t/transition-delay/

他们写你的短手过渡属性的方式只包括过渡期。

转换：[transition-property] [transition-duration] [transition-timing-function] [transition-delay];

所以只需将延迟时间添加到行尾即可：

-webkit-transition: height 200ms ease-in 200ms;
-moz-transition: height 200ms ease-in 200ms;
-o-transition: height 200ms ease-in 200ms;
transition: height 200ms ease-in 200ms;

高度过渡不起作用

3 个答案: