css - 为什么动画不适用于最大高度？

Question

根据 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，它会很好地工作。有什么问题？

Answer 1

一切正常，但您的示例设置不正确，无法演示效果。 animated-div 不够高，看不到效果，在 max-height 开始之前，不透明度已经很低，你看不到效果了。

查看我的 updated fork用于演示(出于演示目的，我添加了更多文本，删除了不透明度更改并在两秒钟内进行了过渡；并且过渡在悬停时起作用以多次查看效果而无需重新启动/重新加载)。