css3高度过渡不起作用

Posted 2023-03-06

【中文标题】css3高度过渡不起作用

【英文标题】：css3 height transition not working

【发布时间】：2011-08-30 16:18:23

【问题描述】：

我在使用 css3 过渡时遇到问题 我怎样才能使过渡平滑它立即出现 我希望 div 框在我将鼠标悬停在它上面时慢慢改变它的高度

html代码

<div id="imgs">

<img src="http://chat.ecobytes.net/img/emoticons/smile.png"  title=":)" />
<img src="http://chat.ecobytes.net/img/emoticons/sad.png"  title=":(" />
<img src="http://chat.ecobytes.net/img/emoticons/wink.png"  title=";)" />
<img src="http://chat.ecobytes.net/img/emoticons/razz.png"  title=":P" />
<img src="http://chat.ecobytes.net/img/emoticons/grin.png"  title=":D" />
<img src="http://chat.ecobytes.net/img/emoticons/plain.png"  title=":|" />
<img src="http://chat.ecobytes.net/img/emoticons/surprise.png"  title=":O" />
<img src="http://chat.ecobytes.net/img/emoticons/confused.png"  title=":?" />
<img src="http://chat.ecobytes.net/img/emoticons/glasses.png"  title="8)" />
<img src="http://chat.ecobytes.net/img/emoticons/eek.png"  title="8o" />
<img src="http://chat.ecobytes.net/img/emoticons/cool.png"  title="B)" />
<img src="http://chat.ecobytes.net/img/emoticons/smile-big.png"  title=":-)" />

</div>

jsfiddle

【问题讨论】：

robertnyman.com/2010/04/27/…

可以使用高度可变的元素和 CSS 过渡来实现打开/关闭效果，并使用一点 JS - 请参阅此处：***.com/a/18636883/93812

【参考方案1】：

我相信你需要设置一个指定的高度而不是自动。 http://jsfiddle.net/BN4Ny/ 这是一个平滑的扩展。不确定您是否想要那种小的关闭打开效果。我刚刚分叉了你的 jsfiddle 并添加了一个指定的高度。

【讨论】：

会有一个问题如果元素（表情）的数量是动态的，因为高度必须更新。

是否可以仅使用 css3 实现关闭打开效果

如果你添加更多，那将是一个问题，但请记住它仍然是 webkit ;)。也许您可以尝试使用 jquery 来帮助提高动态高度。

@nick，我自己刚开始玩 css3，但您可以考虑缩放转换。

遗憾的是，2015 年仍然如此。但是，有一个使用 max-height 的解决方法。更多信息：***.com/questions/3508605/…

【参考方案2】：

此方案不需要javascript，或者存在需要事先为容器设置一个固定高度的问题。

这可以通过使用max-height 属性并将其值设置为高值来实现。

#imgs 
    border:1px solid #000;
    border-radius:3px;
    max-height:20px;
    width:100%;
    overflow:hidden;
    transition: 2s ease;

#imgs:hover 
    max-height:15em;

<div id="imgs">

  <img src="https://sslb.ulximg.com/image/405x405/artist/1346353449_4159240d68a922ee4ecdfd8e85d179c6.jpg/e96a72d63f272127d0b6d70c76fd3f61/1346353449_eminem.jpg" />
</div>

【参考方案3】：

而不是在容器上使用设置高度或使用 JS（这两个都是尴尬的解决方案）...您可以将图像放在列表项中并在 li 上进行转换。

如果所有图像都达到相似的高度，则意味着容器内的内容仍然可以是动态的。比如……

/*
CLOSED
*/

div.container li 

  height:0px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

/*
OPEN
*/

div.container:hover li 

  height:30px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

【参考方案4】：

您可以这样做：http://jsfiddle.net/minitech/hTzt4/

不幸的是，为了保持灵活的高度，JavaScript 是必需的。

【参考方案5】：

我正在使用这种方法： 使用最大高度来过渡高度而不是直接使用高度... 例如：

div 
     height: auto;
     max-height:0;
 

   .toggle-above-div:hover div 
    max-height:0;