Question

我想为div创建一个简单的向下/向上滑动动画。问题是它只在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

有一个角度插件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向下滑动/向上滑动，具有非固定高度

1 个答案: