ngAnimate 幻灯片 down/up 具有非固定高度

Question

我想为 div 创建一个简单的幻灯片 down/up 动画。问题是它仅在 div 具有固定高度时才有效。

index.html

<div id="guildDetails" class="animate-show" ng-show="guildDetails.show">
</div>

style.css

.ng-hide-add, .ng-hide-remove {
    display: block !important;
}
.animate-show {
    transition: .3s linear all;
    height: 500px;
    overflow: hidden;
}
.animate-show.ng-hide {
    height:0;
}

它确实有效，但 div 中的内容不是静态的，因此 500px 有时太大，有时又太小。我尝试将高度设置为自动，但是，如果我设置了它，那么它将不起作用。

如果我不想使用固定高度，如何设置动画？

Answer 1

有 angular 插件 ng-slide-down 可以解决这个问题。我已经成功地在我的项目中使用它来实现动态内容向下滑动。

在此处复制示例中的代码

<div ng-click="widgetExpanded = !widgetExpanded" class="head">
    Click to slide in/out
  </div>
  <div ng-slide-down="widgetExpanded" lazy-render duration="1">
    <div class="content">
      Some awesome content here
    </div>
  </div>

使用 ng-slide-down="widgetExpanded" 和布尔值属性并更新它以上下滑动 div。

JS-Fiddle 例子

ngAnimate 幻灯片 down/up 具有非固定高度

ngAnimate slide down/up with non-fix height

html

javascript

css

angularjs

ng-animate