Question

我尝试使用角度和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可见。

您需要将溢出（特别是overflow-y）设置为隐藏在show-anomation div中以允许隐藏内容：

overflow-y: hidden;

这里是小提琴：https://jsfiddle.net/5mr8azvn/

使用ngAnimate滑动效果

1 个答案: