使用 UI-Grid 动画 ng-hide

Question

我有一个表单，我在页面底部使用 ng-hide 来隐藏包含 UI-Grid table 的 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 class:

来解决此问题

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

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

使用 UI-Grid 动画 ng-hide

Animate ng-hide with UI-Grid

angularjs

ng-animate

angular-ui-grid