动画扩展表行

Question

我有一个用表格表示的日历。每天的内容可能太多而无法显示，因此高度固定并且溢出隐藏。但是当用户将鼠标悬停在该行上时，我将整个行展开。这很完美。我需要从高处缓解行中div的过渡：60px到height：auto，或许将它减慢到大约500ms。

我正在使用AngularJS 1.2，我已经加载了ngAnimate以及animate.css（在应用程序的其他地方使用过）。

日历中的每一天都是td标记内的div。

div.cal_container
{
  height:60px; 
  overflow:hidden;
}

当我将鼠标悬停在行上时，这就是我用来展开整行的内容：

table.cal tr:hover > td > div
{
  height:auto;
}

如何设置高度过渡的动画？

Answer 1

问题似乎是过渡不喜欢身高：自动。我找到了这个解决方案/解决方法，它给了我95％的我想要的东西：

为div添加最大高度：

div.cal_container
{
  height:60px; 
  overflow:hidden;
  max-height: 60px;
}

将转换添加到行选择器CSS中的 max-height ：

table.cal tr:hover > td > div
{
  max-height: 1000px;
  transition: max-height 0.75s ease-in;
  height:auto;  
}

我想得到的最后一点是缓和过渡到高度：当它们停止悬停时为60px，但这不太重要。