Question

我有一个表单，我在页面底部使用ng-hide隐藏包含UI-Grid表格的div，正如 Hidden Grids 教程中所建议的那样文档。当用户点击提交按钮时，网格按预期显示，但其显示不是动画。奇怪的是，包含网格的div看起来非常精细。

我已在此Plunker中复制了此问题，以下是相关代码供参考。这个真的很难过，所以任何建议都非常感谢。谢谢！

HTML

<h4><a href="#" ng-click="hidden = ! hidden">Reveal</a></h4>
<div class="background animate-hide" ng-hide="hidden">
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>

CSS

.grid {
  width: 500px;
  height: 250px;
  display: block;
  position:relative;
}

.background {
  padding: 15px;
  background-color: #F7F7F7;
}

.animate-hide {
  transition: opacity 0.4s ease-out 0.1s !important;
  transition: height 0.5s ease-out !important;
  opacity: 1;
  height: 260px;
}

.animate-hide.ng-hide {
  opacity: 0;
  height: 0;
}

}

Answer 1

由于网格具有明确的高度设置，因此它会溢出.background div。 overflow CSS属性的默认值为visible，这意味着网格将溢出其容器的尺寸并完全可见。

您可以通过向overflow: hidden班级添加.animate-hide来解决此问题：

.animate-hide {
  transition: opacity 0.4s ease-out 0.1s !important;
  transition: height 0.5s ease-out !important;
  opacity: 1;
  height: 260px;
  overflow: hidden;
}

这是一个显示效果的更新的plunker：http://plnkr.co/edit/3kO5HqSZTGVM8A3YScYq?p=preview

使用UI-Grid动画ng-hide

1 个答案: