Question

我想要一种只使用CSS过渡的方法，以便在悬停时有效地（且有吸引力地）隐藏/显示内容。

需要注意的是，我希望保持动态（自动）高度。

似乎最佳路线是在fixed height:0到height:auto之间转换，但唉，浏览器中的转换尚不支持。

回应评论的澄清 ::这不是一个等待所有生活浏览器兼容CSS3的问题，而是解决CSS3本身的一个明显缺点（例如缺少height:0＆gt; height:auto）

我已经探索了其他一些方法，可以在下面的小提琴中查看（下面详细说明），但它们都不能让我满意，而且我喜欢其他方法的反馈/提示。

基本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。您需要随意设置一个 max-height ，它具有广泛的动态内容，可能会切断信息。

b。如果作为（ a ）的预防措施，您需要设置非常高位最大高度，由于浏览器无形地转换整个距离，因此动画延迟变得笨拙且难以维持。同时使缓和效果降低。

<小时/> 变化＃2 - 填充和成长幻觉

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

缺点

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

<小时/> 变体＃3 - 仅有错误的宽度方法

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

缺点

a。随着宽度缩小，换行会强制任何额外的文字进入后续行，我们最终会得到一个仍然需要房地产的超高隐形div。

<小时/> 变体＃4 - 有效但紧张，字体大小

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

缺点

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

b。这仅适用于包含文字的内容。需要添加其他转换来管理输入和图像的缩放，虽然完全可行，但这会削弱其简单性。

<小时/> 变化＃5 - 线高的黄油

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

缺点

a。我最喜欢美学，但与＃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 }

缺点

a。悬停延迟并非最佳。这是因为.content被隐藏在屏幕上很远的地方，并且在出现之前需要花时间向下动画。

b。 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/

Answer 2

嗯......我知道它已经有一段时间了，但我需要使用高度动画，并且相信许多其他程序员仍然需要或/并且需要这样做。

所以，我落到了这里，因为当用户悬停单元格时，我需要在单元格表中显示产品描述的模式细节。在没有用户悬停的情况下，仅显示最多2行描述。一旦用户将其悬停，所有行（文本可以是1到8行，动态和不可预测的长度）必须以某种高度动画显示。

我遇到了同样的困境，并选择使用最大高度转换（设置一个高的最大高度，我确信这不会削减我的文本），因为这种方法在我看来是最干净的解决方案动画高度。

但是我不能满足于＃34;滑倒＆＃34;动画，就像你一样当我在此处找到关于过渡曲线的评论时：http://css3.bradshawenterprises.com/animating_height/。

这个人的想法很棒，但仅仅是这个解决方案和＃34;切断＆＃34; ＆＃34;向下滑动＆＃34;动画。所以稍微思考一下，我才能找到最终的解决方案。

所以这是我使用Rhys的想法的解决方案（上面链接的家伙）：

向下滑动动画（悬停），使用＆＃34; 平滑增长＆＃34;和向上滑动动画不用（虚拟）＆＃34; <强>延迟＆＃34;：

＆＃13;

div {
  background-color: #ddd;
  width: 400px;
  overflow: hidden;
  -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  max-height: 38px;
}
div:hover {
  -webkit-transition: max-height 2s ease;
  -moz-transition: max-height 2s ease;
  transition: max-height 2s ease;
  max-height: 400px;
}

＆＃13;

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis
  placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
</div>

＆＃13;

这是一个简单的JsFiddle

以下是您的JsFiddle更新（切片，确实）

这是一个完美的（在我看来）解决方案，菜单，描述和一切都不是非常难以预测，但正如你之前指出的那样，需要设置一个高的最大高度，并且可能会切割 - 一个令人惊讶的高动态内容。在这种特定情况下，我将使用jQuery / JavaScript来设置高度的动画。由于内容的更新将使用某种JavaScript进行，因此我无法使用Js方法对动画造成任何伤害。

希望我帮助那里的人！

Answer 3

您应该使用scaleY。

HTML：

<p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS：

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

我在jsfiddle http://jsfiddle.net/dotnetCarpenter/PhyQc/9/

上制作了上述代码的供应商前缀版本

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

3 个答案: