动画展开表格行

我有一个以表格表示的日历。每天的内容可能太多以至于无法显示，因此高度固定并且溢出隐藏。但是，当用户悬停在行上时，整行都会展开。这是完美的。我需要缓解转换的行从高度：60px到高度：自动，也许减慢到约500ms。我使用AngularJS 1.2，我ngAnimate加载以及animate.css（在应用程序中的其他地方使用）。动画展开表格行

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

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

当我将鼠标悬停在该行这是我用它来展开整个行：

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

我如何动画的高度过渡？

来源

2014-07-12 James Bell

你的行在ngRepeat中吗？你试过什么了？你想在ngAnimate中使用CSS转换吗？ – pixelbits

是的，对于行（星期）和列（天）都有ngRepeats，如下所示：。如果他们工作，转换就可以了。 –

忘了补充一点，我尝试添加“transition：height 0.5s;”到上面显示的两个CSS部分。 –

问题似乎是过渡不喜欢height：auto。我发现这个解决方案/解决方法和它给我什么，我想95％：

添加最大高度到div：

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

添加的行选择CSS过渡到最大高度 ：

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

我想获得的最后一位是缓解过渡回高度：60像素，当他们停止徘徊，但这是次要的。

来源

2014-07-13 17:48:53

动画展开表格行

回答

相关问题