擴大與動畫和非固定大小

Question

http://embed.plnkr.co/tcTZlA/preview

基本上所有我想要的是沒有設置高度在.slideDown類/ DIV崩潰。我希望它根據div內容的高度進行擴展。 我沒有找到如何做到這一點AngularJS的方式，所以如果你有任何線索，我會把它。

謝謝

Answer 1

.slideDown { 
    height:141px; 
    transition:height 0.35s ease; 
    overflow:hidden; 
    position:relative; 
} 

在這個類中刪除height屬性，然後它會變成這個樣子

非固定大小試試這個

.slideDown.ng-hide { 
    max-height: 0; 
    transition: max-height 0.35s ease-out; 
    overflow:hidden; 
    position:relative; 
} 

.slideDown { 
    max-height: 1000px; 
transition: max-height 0.35s ease; 
    overflow:hidden; 
    position:relative; 
} 

Answer 2

使用CSS轉換爲滑下動畫和你的類寫下像

.blockToHideAndShow{ 
    height : 0px; 
    -webkit-transition: height 0.3s ease; 
    -moz-transition: height 0.3s ease; 
    -o-transition: height 0.3s ease; 
    -ms-transition: height 0.3s ease; 
    transition: height 0.3s ease; 
} 
.blockToHideAndShow.slideDown{ 
    height : initial; 
} 

希望能對大家有所幫助。

Answer 3

變化.slideDown的高度爲自動。所以這部分將是：

.slideDown { 
    height:auto; 
    transition:height 0.35s ease; 
    overflow:hidden; 
    position:relative; 
} 

編輯：您可以使用ng-slide-down。然後你的slideDown div將使用ng-slide-down而不是ng-hide。

Answer 4

，最大-height屬性不高

.slideDown.ng-hide { 
    max-height:0; 
    transition:max-height 0.35s ease; 
    overflow:hidden; 
    position:relative; 
} 

.slideDown { 
    max-height:400px; // make this value higher than the expected content value 
    transition:max-height 0.35s ease; 
    overflow:hidden; 
    position:relative; 
}