折叠时动态设置div的宽度

Question

到目前为止我所拥有的：

JSBIN

尝试双击一个项目，它将显示一个子项目。我想像那样制作动画。我将width设置为300px（静态）只是为了向您展示它是如何工作的，但是我希望它是width:auto（动态）但是如果我将它设置为动态则动画不起作用auto。

如何让它变得动态？例如，子div内有超过2个项目或根本没有项目。

Answer 1

这有点像黑客，但你可以使用max-width而不是width，只需设置一个上限即可得到最大宽度。

http://jsbin.com/mibozupe/1/edit

.slides-child{
   display: inline-block;
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
  opacity:1;
  max-width: 500px;  
}
.slides-child.ng-hide{
  opacity: 0;
  max-width: 0;
}