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

Posted

技术标签:

【中文标题】AngularJS:使用 css 过渡动画 ng-hide / ng-show li 的高度【英文标题】:AngularJS: Animate ng-hide / ng-show height of li by using css transitions 【发布时间】: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 过渡。 【参考方案1】:

只需通过动画max-height 而不是像这个 DEMO PLNKR 中的 height 来实现。这样,您就可以在0max-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 的动画分开。当然。

希望对你有帮助!

【讨论】:

以上是关于AngularJS:使用 css 过渡动画 ng-hide / ng-show li 的高度的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 和 CSS 过渡

滚动条通过 CSS 动画/过渡出现

AngularJS css 动画 + 完成回调

CSS 过渡不适用于 ng-class

[AngularJS] AngularJS系列 中级篇之动画

ng的动画过渡