Question

http://embed.plnkr.co/tcTZlA/preview

基本上我只想要在.slideDown类中设置高度。我希望它根据div内容的高度进行扩展。我没有找到如何以AngularJS方式做到这一点，所以如果你有任何线索我会接受它。

谢谢

Answer 1

.slideDown {
  height:141px;
  transition:height 0.35s ease;
  overflow:hidden;
  position:relative;
}

在此类中移除height属性，然后它将变为非固定大小，如此

试试这个

   .slideDown.ng-hide {
  max-height: 0;
  transition: max-height 0.35s ease-out;
  overflow:hidden;
  position:relative;
}

.slideDown {
  max-height: 1000px;
 transition: max-height 0.35s ease;
  overflow:hidden;
  position:relative;
}

Answer 2

使用CSS过渡进行下滑动画并记下类似

的类

.blockToHideAndShow{
   height : 0px;
   -webkit-transition: height 0.3s ease;
   -moz-transition: height 0.3s ease;
   -o-transition: height 0.3s ease;
   -ms-transition: height 0.3s ease;
   transition: height 0.3s ease;
}
.blockToHideAndShow.slideDown{
   height : initial;
}

希望它会有所帮助。

Answer 3

使用max-height属性而非高度

.slideDown.ng-hide {
  max-height:0;
  transition:max-height 0.35s ease;
  overflow:hidden;
  position:relative;
}

.slideDown {
  max-height:400px; // make this value higher than the expected content value 
  transition:max-height 0.35s ease;
  overflow:hidden;
  position:relative;
}

Answer 4

将.slideDown的高度更改为auto。那部分将是：

.slideDown {
  height:auto;
  transition:height 0.35s ease;
  overflow:hidden;
  position:relative;
}

编辑：您可以使用ng-slide-down。然后你的slideDown div将使用ng-slide-down而不是ng-hide。

使用动画和非固定大小展开/折叠div

4 个答案: