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 来隐藏/显示无序列表的项目。由于效果有点太快,用户无法注意到我的li
s 的消失/出现,我想在高度上添加一个过渡。
li
transition: height 1s linear;
overflow: hidden;
li.ng-hide
height: 0;
这是我的问题所在:过渡不会影响li
s,除非我为它们设置了一个我不想要的高度,因为我不知道它们有多大。
Here is a plunker to illustrate that. 我已经在li
s 和div
s 上进行了测试,我也尝试过不使用 Angular,这似乎不是负责任的。
如何在不设置元素高度的情况下进行过渡?
【问题讨论】:
你必须定义高度以及过渡.. 您不能在未指定的高度之间进行 CSS 过渡。 【参考方案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 的动画分开。当然。
希望对你有帮助!
【讨论】:
以上是关于AngularJS:使用 css 过渡动画 ng-hide / ng-show li 的高度的主要内容,如果未能解决你的问题,请参考以下文章