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

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 进行演示（我添加了更多文本，删除了不透明度更改并在两秒钟内进行了过渡以进行演示；并且过渡在悬停时可以多次查看效果而无需重新启动/重新加载）。