根据 this answer,我们可以为 max-height
属性设置动画,但是由于某些原因,动画未应用于像这样指定的 max-height
属性 (see plunker):
.animated-div {
overflow: hidden;
background: lightblue;
opacity:1;
height:500px;
}
.animated-div.ng-hide-add.ng-hide-add-active,
.animated-div.ng-hide-remove.ng-hide-remove-active {
transition:all linear 0.5s;
}
.animated-div.ng-hide {
height:0;
opacity:0;
}
然而,如果我将 max-height 更改为 height,它会很好地工作。有什么问题?
最佳答案
一切正常,但您的示例设置不正确,无法演示效果。 animated-div
不够高,看不到效果,在 max-height 开始之前,不透明度已经很低,你看不到效果了。
查看我的 updated fork用于演示(出于演示目的,我添加了更多文本,删除了不透明度更改并在两秒钟内进行了过渡;并且过渡在悬停时起作用以多次查看效果而无需重新启动/重新加载)。
关于css - 为什么动画不适用于最大高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26583917/