寻求一个优雅的，仅CSS的方法来隐藏/显示自动高度内容（带转换） [英] Seeking an elegant, CSS-only method for hiding/showing auto-height content (with transitions)
问题描述
我想要一个只使用CSS转换的方法，以便有效（和吸引力）在悬停时隐藏/显示内容。
注意，保持动态（自动）高度。
似乎最佳路线是在固定高度之间转换：0 到 height：auto ，但是浏览器中的转换尚不支持。
响应注释的澄清 ::这不是一个问题，等待直到所有活的浏览器都是CSS3兼容，而是解决CSS3本身的缺点（例如缺乏 height：0 ）
我已探索过一些其他的方法，可以看到下面的小提琴（和下面详述），但没有一个满足我，我会喜欢反馈/提示其他方法。
http://jsfiddle.net/leifparker/PWbXp/1/
基本CSS
.content {
-webkit-过渡：所有0.5s缓入;
-moz-transition：all 0.5s ease-in-out;
transition：all 0.5s ease-in-out;
overflow：hidden;
}
变化＃1 - -Height Hack
.content {max-height：0px; }
.activator：hover + .content {max-height：2000px; }
缺点
。您需要任意设置上限 max-height ，其中包含大量动态内容，可能会切断信息。
b。如果作为（ a ）的预防措施，您希望将非常上 max-height ，动画的延迟变得尴尬，并且难以维持，因为浏览器不可见地过渡了整个距离。
变化＃2 - 填充和生长幻觉
.content {padding：0px; height：0px;不透明度：0; }
.activator：hover + .content {padding：10px 0px; height：auto;不透明度：1; }
缺点
a。令人震惊。它确实比只是弹出内容无处不在，效果是通过转换不透明度进一步销售，但总体来说不是那么视觉上的光滑。
变体＃3 - 有错宽度方法
.content {width： 0％; }
.activator：hover + .content {width：100％; }
缺点
a。随着宽度的缩小，线包装将任何额外的文本强加到后续的行，我们最终得到一个仍然需要房地产的超高的不可见div。
变化＃4 - 有效，但是抖动，字体
.content {font-size：0em;不透明度：0; }
.activator：hover + .content {font-size：1em;不透明度：1; }
缺点
虽然这种效果非常好，但是随着字体增长，换行会产生不利的抖动。
b。这仅适用于由文本组成的内容。需要添加其他转换以管理输入和图像的缩放，并且尽管完全可行，但这会损害简单性。
变化＃5 - 线条的高度
.content {line-height：0em;不透明度：0; }
.activator：hover + .content {line-height：1.2em;不透明度：1; }
缺点
a。我最喜欢的是美学，但与＃4一样，这种方式最简单的只有文本内容。
变化＃6 - 抗锯齿（由@graphicdivine提供）
.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 被隐藏在屏幕上相当远的地方，并在显示之前花费时间向下动画。
b 。 margin-top：-100％是相对于包含元素的宽度。因此，对于流体设计，当窗口收缩相当小时， margin-top 不足以保持 .content 隐藏。
如前所述，如果只有我们可以在
height：0 和 height：auto ，这一切都是无效的。 ？
谢谢！
Leif
尝试抗边缘：
.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}
I'd like a method that uses only CSS transitions, to effectively (and attractively) hide/show content on hover.
The caveat being that I wish to keep dynamic (auto) height.
It seems that the optimal route would be to transition between a fixed height:0, to a height:auto, but alas this is not yet supported by transitions in browsers.
A clarification in response to the comments :: This isn't so much a question of waiting until all living browsers are CSS3 compatible, but rather addressing a perceived shortcoming of CSS3 itself (eg. the lack of height:0 > height:auto)
I've explored a few other ways, which can be viewed at the following fiddle (and elaborated below), but none of them satisfy me, and I'd love feedback/tips for other approaches.
http://jsfiddle.net/leifparker/PWbXp/1/
Base 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;
}
Variation #1 - The Max-Height Hack
.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }
Cons
a. You'll need to arbitrarily set an upper max-height, which, with extensive dynamic content, could potentially cut off information.
b. If, as a precaution to (a), you resort to setting a very high upper max-height, the delay on animation becomes awkward, and untenable, as the browser invisibly transitions the entire distance. Also makes easing less visually effective.
Variation #2 - Padding and the Illusion of Growth
.content { padding:0px; height:0px; opacity:0; }
.activator:hover +.content { padding:10px 0px; height:auto; opacity:1; }
Cons
a. It's jarring. It's definitely slightly better than just popping the content out of nowhere, and the effect is further sold by transitioning the opacity, but overall it's not that visually slick.
Variation #3 - The Faulty Width-Only Approach
.content { width:0%; }
.activator:hover +.content{ width:100%; }
Cons
a. As the width shrinks, the line-wrap forces any extra text onto subsequent lines, and we end up with a super tall invisible div that still demands the real-estate.
Variation #4 - The Effective, but Jittery, Font-Size
.content { font-size:0em; opacity:0; }
.activator:hover +.content{ font-size:1em; opacity:1; }
Cons
a. While this has a nice, sweeping sort of effect, the shifting of the line-wrap as the font grows causes unappealing jitter.
b. This only works for content consisting of text. Other transitions would need to be added to manage the scaling of inputs, and images, and while entirely viable, this would erode the simplicity.
Variation #5 - The Butteriness of Line-Height
.content { line-height:0em; opacity:0; }
.activator:hover +.content{ line-height:1.2em; opacity:1; }
Cons
a. My favorite aesthetically, but as with #4, this works most simply with text-only content.
Variation #6 - The Anti-Margin (as offered by @graphicdivine)
.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 }
Cons
a. There is a delay on hover which is not optimal. This is the result of the .content being tucked invisibly quite far up the screen, and taking time to animate downwards before appearing.
b. The margin-top: -100% is relative to the containing element's width. So, with fluid designs there's the potential that when the window is shrunk quite small, the margin-top wont be sufficient to keep the .content hidden.
As I said before, if only we could transition between
height:0 and height:auto, this would all be moot.
Until then, any suggestions?
Thanks! Leif
Try this, The anti-margin:
.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 }
这篇关于寻求一个优雅的，仅CSS的方法来隐藏/显示自动高度内容（带转换）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
