html - ngAnimate 的幻灯片效果

Question

我尝试使用 angular 和 ngAnimate 来获得幻灯片效果。我可以很好地作为 opacity 的淡入/淡出效果。

.show-animation {
  -webkit-transition: 1s all linear;
   transition:all linear 1s;
   opacity: 1;
 }

.show-animation.ng-hide {
  opacity: 0;
}

参见示例:https://jsfiddle.net/1bnpqpy8/10/

但是当我尝试将 max-height 属性用于幻灯片效果时，它不再起作用。

.show-animation {
  -webkit-transition: 1s all linear;
   transition:all linear 1s;
   max-height: 25px;
 }

.show-animation.ng-hide {
  max-height: 0;
}

参见示例:https://jsfiddle.net/1bnpqpy8/11/

为什么 ngAnimate 不能使用 max-height？我做错了什么？

Answer 1

您缺少一个重要的 css 属性:overflow。

溢出告诉 div 如果内容大于高度(或最大高度)该怎么做。默认值为 visible 并且由于您的内部 div 之一设置了高度(timelineVoid 设置为 20px)，这将强制 div可见。

您需要在 show-anomation div 中设置溢出(特别是 overflow-y)以隐藏内容:

overflow-y: hidden;

这是 fiddle :https://jsfiddle.net/5mr8azvn/