寻求一种优雅的,仅用于CSS的方法来隐藏/显示自动高度内容(带有过渡)

Question

我想要一种仅使用CSS过渡的方法,以有效地(并且有吸引力地)在悬停时隐藏/显示内容.

需要注意的是,我希望保持动态(自动)高度.

似乎最佳路由是在a fixed height:0到a 之间转换height:auto,但是这还不是浏览器中的转换所支持的.

回应评论的澄清 ::这不是一个等待所有生活浏览器兼容CSS3的问题,而是解决CSS3本身的缺点(例如缺少height:0> height:auto)

我已经探索了其他一些方法,可以在下面的小提琴中查看(并在下面详细说明),但它们都不能满足我,我喜欢其他方法的反馈/提示.

http://jsfiddle.net/leifparker/PWbXp/1/

基本CSS

.content{
    -webkit-transition:all 0.5s ease-in-out;  
    -moz-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    overflow:hidden;
}

---

变化#1 - 最大高度黑客

.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }

缺点

一个.您需要随意设置一个较高的最大高度,这个动态内容可能会切断信息.

湾 如果作为(a)的预防措施,你需要设置一个非常高的最大高度,动画的延迟就会变得笨拙而且站不住脚,因为浏览器会无形地转换整个距离.也使缓和​​视觉效果降低.

---

变异#2 - 填充和成长的错觉

.content { padding:0px; height:0px; opacity:0; }
.activator:hover +.content { padding:10px 0px; height:auto; opacity:1; }

缺点

一个.这很刺耳.它绝对比仅仅突然出现内容稍微好一些,并且通过转换不透明度来进一步销售效果,但总体而言,它不是那种视觉上的光滑.

---

变化#3 - 仅有故障的宽度方法

.content { width:0%; }
.activator:hover +.content{ width:100%; }

缺点

一个.当宽度缩小时,换行会强制任何额外的文本进入后续行,我们最终会得到一个仍然需要房地产的超高隐形div.

---

变化#4 - 有效,但紧张,字体大小

.content {  font-size:0em; opacity:0; }
.activator:hover +.content{  font-size:1em; opacity:1; }

缺点

一个.虽然这有一个很好的,彻底的效果,但随着字体的增长换行会导致无法产生抖动.

湾 这仅适用于由文本组成的内容.需要添加其他转换来管理输入和图像的缩放,虽然完全可行,但这会削弱其简单性.

---

变化#5 - 线高的黄油

.content { line-height:0em; opacity:0; }
.activator:hover +.content{ line-height:1.2em; opacity:1; }

缺点

一个.我最喜欢美学,但与#4一样,这最简单的方法是使用纯文本内容.

---

变奏#6 - 反边缘(由@graphicivine提供)

.wrapper_6 { min-height: 20px }
.wrapper_6 .activator {z-index:10; position: relative}
.wrapper_6 .content { margin-top: -100%; }
.wrapper_6 .activator:hover +.content{ margin-top: 0 }

缺点

一个.悬停有延迟,这不是最佳的.这是在.content屏幕上隐藏得非常隐蔽,并且在出现之前花费时间向下动画的结果.

湾 它margin-top: -100%是相对于包含元素的宽度.因此,对于流体设计,当窗户缩小很小时,margin-top可能不足以保持.content隐藏.

---

正如我之前所说,如果我们只能在height:0和之间进行过渡height:auto,那么这一切都没有实际意义.

在那之前,有什么建议吗？

谢谢!雷夫

Answer 1

试试这个,反边缘:

.wrapper_6 { min-height: 20px }
.wrapper_6 .activator {z-index:10; position: relative}
.wrapper_6 .content { margin-top: -100%; }
.wrapper_6 .activator:hover +.content{ margin-top: 0 }

http://jsfiddle.net/PWbXp/