AngularJS:通过使用css过渡来动画ng-hide / ng-show height of li

Question

我正在使用 Angular 来隐藏/显示无序列表的项目。由于效果有点太快，以至于用户无法注意到我的li的消失/外观，因此我想在高度上添加一个过渡。

li {
  transition: height 1s linear;
  overflow: hidden;
}
li.ng-hide {
  height: 0;
}

这就是我的问题所在：过渡不会影响li s，除非我为它们设置一个我不想要的高度，因为我并不完全知道它们有多大。

这里有一个 plunker 来说明这一点。我已经对li s和div进行了测试，我也尝试过没有Angular，这似乎不是负责任的。

如何在不设置元素高度的情况下使过渡工作？

Answer 1

只需通过动画max-height而不是像这个演示PLNKR那样height来完成。通过这种方式，您可以在0和max-height属性之间拥有元素的动态高度。不需要jQuery。您应该避免在 AngularJS 应用程序中使用 jQuery 或直接 DOM-Injections。

li,
div {
  transition: all 1s linear;
  -webkit-transition: all 1s linear;
  border: 1px solid;
  overflow: hidden;
}
.work {
  border-color: green;
  max-height: 500px;
}
.no-work {
  border-color: red;
  max-height: 500px;
}
li.ng-hide,
div.ng-hide {
  max-height: 0;
}

Answer 2

我自己过去也遇到过同样的问题，并发现必须设置高度，这是为了让过渡计算需要发生什么。我设法解决这个问题的两种方法：

CSS方式：

li {
  transition: max-height 1s linear;
  overflow: hidden;
  max-height: 500px; // Any value above what you expect to be the biggest
}
li.ng-hide {
  max-height: 0;
}

上述方法有两个缺点，一是你需要知道上限，二是动画会略有跳跃。更好的方法可能是使用 javascript 计算高度：

** 来自 JQUERY 的更新 **

var listItems = document.getElementsByTagName("li")
for (var i = 0; i < listItems.length; i++) {
  listItems[i].style.height = listItems[i].clientHeight + 'px';
}

然后你需要 css：

li.ng-hide {
  height: 0 !important;
}

覆盖样式属性。这是此示例的笔，其中包含一些额外的内容来说明解决方案。

Answer 3

您不一定需要根据高度设置过渡。您可以在 ng-hide 或 ng-show 属性上设置它。

以下是使用此功能的示例：

https://plnkr.co/edit/pD4sQNGqpqrINJlZwE3q?p=preview

只需将类分配给要进行动画处理的元素即可。

.animate.ng-hide-add,
.animate.ng-hide-remove {
  transition: all linear 2s;
}

您可以在此处找到更多信息：https://docs.angularjs.org/api/ng/directive/ngShow

注意：你可以在css中分离ng-hide-add和ng-hide-move的动画。

希望对您有所帮助！