Slide effect with ngAnimate

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。

overflow告訴div如果內容大於height（或max-height），該做什麼。默認值爲visible，並且由於其中一個內部div具有設置高度（timelineVoid設置爲20px），因此這會強制div可見。

你需要設置爲隱藏在你的show-anomation DIV溢出（特別是溢出-Y），以允許內容被隱藏：

overflow-y: hidden; 

這裏是小提琴：https://jsfiddle.net/5mr8azvn/