为什么动画不能用于最大高度？

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只是不足以看到效果，在最大高度开始之前，不透明度已经很低，你再也看不到效果了。

请参阅我的updated fork进行演示（我添加了更多文字，删除了不透明度更改，并在两秒钟内进行了转换以用于演示目的;并且转换适用于悬停以多次查看效果而无需重新启动/重新加载）。