我正在使用 Angular 来隐藏/显示无序列表的项目。由于效果有点太快了，用户无法注意到我的lis的消失/出现，我想在高度上添加一个过渡。
li {
transition: height 1s linear;
overflow: hidden;
}
li.ng-hide {
height: 0;
}
这就是我的问题所在：过渡不会影响lis，除非我为它们设置了一个我不想要的高度，因为我不完全知道它们有多大。
这是一个 plunker 来说明这一点。我已经对lis 和divs进行了测试，并且我也尝试过没有 Angular ，这似乎不是负责人。
如何在不设置元素高度的情况下进行过渡？
只需通过动画max-height而不是height像在这个DEMO PLNKR中那样做。通过这种方式，您可以在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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句