AngularJS：使用 css 过渡动画 ng-hide / ng-show li 的高度答案

【问题标题】：AngularJS: Animate ng-hide / ng-show height of li by using css transitionsAngularJS：使用 css 过渡动画 ng-hide / ng-show li 的高度
【发布时间】：2017-11-09 20:56:03
【问题描述】：

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

li {
  transition: height 1s linear;
  overflow: hidden;
}

li.ng-hide {
  height: 0;
}

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

Here is a plunker to illustrate that. 我已经在lis 和divs 上进行了测试，我也尝试过不使用 Angular，这似乎不是负责任的。

如何在不设置元素高度的情况下进行过渡？

【问题讨论】：

你必须定义高度以及过渡..
您不能在未指定的高度之间进行 CSS 过渡。

标签： css angularjs css-transitions

【解决方案1】：

只需通过动画max-height 而不是像这个 DEMO PLNKR 中的 height 来实现。这样，您就可以在0 和max-height 属性之间获得元素的动态高度。 不需要 jQuery。您应该避免在 AngularJS 应用程序中使用 jQuery 或直接 DOM 注入。

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;
}

【讨论】：

如果div的高度超过250px怎么办？
把它放在2000px 或类似的想法上。此解决方案是处理您的问题的常用方法。重要的是不要在 AngularJS 应用程序中使用 jQuery。
尝试将20000px 放入您的插件并检查
是的，仍然可以正常工作。动画速度更快。见这里：plnkr.co/edit/Ti19Co6yk5pZdyZXUHhL?p=preview
我将此答案设置为选中，即使在动画开始时引入了延迟。因为我可以大致确定一个不那么夸张的最大高度，所以这个技巧就可以了。谢谢。

【解决方案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;
}

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

【讨论】：

不要在 AngularJS 中使用 jQuery。
@lin 我忽略了角度部分，并使用 jQuery 作为更易于编写的解决方案。现已更新。
如果有更好的解决方案，为什么我们不能使用它而不是去复杂的部分？
@Mr_Perfect vanilla javascript 解决方案仍然很简单，我只是对我自己来说，用 jQuery 编写更容易，因为我已经习惯了。您是否尝试过这两种解决方案？
@IanTaylor 你的脚本和 jQuery 一样 -> DOM INJECTIONS。这不是你在使用 AngularJS 时应该如何解决这些问题的方式。它仍然是同样的问题，就像使用 jQuery 一样。 document.getElementsByTagName("li") 如果元素在执行时不存在于 HTML 中，则会中断，如果呈现的元素发生更改，它也会中断。请让自己了解 AngularJS E2E 绑定是如何工作的。不要为 AngularJS 应用程序提供这样的解决方案。或者为它创建一个指令。我不推荐使用这个解决方案，因为它会破坏你的 AngularJS 应用程序。

【解决方案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

nb：您可以在 CSS 中将 ng-hide-add 和 ng-hide-remove 的动画分开。当然。

希望对你有帮助！

【讨论】：