ngAnimate ngShow身高過渡

Question

我想要的高度動畫，

在我的HTML我得到

<div ng-show="showdiv==true" class="default" ng-animate={show: 'rollup'}> 
    This is an error message that can have hell lots of content 
</div> 

<button ng-click="showdiv=true">Toggle</button> 

而且我的CSS是如下

.rollup{ 
    max-height: 200px; 
    overflow: hidden; 
    -webkit-transition: max-height 5s; 
    -moz-transition: max-height 5s; 
    transition: max-height 5s; 
} 

這似乎是一個新手的錯誤

但是我對css太可怕了，所以我可以做什麼指針？

Answer 1

您需要設置一些具體的東西才能使用CSS動畫。下面的代碼使用CSS動畫開啓和關閉，不依賴於ng-animate。

CSS：

.default { 
    height:0px; 
    background: #e5feff; 
    overflow: hidden; 
    -moz-transition: 1s; 
    -ms-transition: 1s; 
    -o-transition: 1s; 
    -webkit-transition: 1s; 
    transition: 1s; 

} 

.rollup{ 
    height:200px; 
    background: #e5feff; 
    overflow: hidden; 
    -moz-transition: 1s; 
    -ms-transition: 1s; 
    -o-transition: 1s; 
    -webkit-transition: 1s; 
    transition: 1s; 
} 

HTML：

<div ng-class="{'default':!showdiv, 'rollup':showdiv}"> 
    This is an error message that can have hell lots of content 
</div> 

<button ng-click="showdiv=!showdiv">Toggle</button> 

這裏是垂直的動畫和觸發器的幾個不同的例子plunker。 http://plnkr.co/edit/2yS1dDlKxvoccQt5jneB?p=preview

編輯：我已經更新了我的蹦牀，以更好地解決您關於ng-animate的問題。如果您使用angular 1.1.5或更早版本，則仍然可以使用ng-animate。從版本1.2開始，ng-animate指令已被棄用。在plunker更新中，我包含了angular-animate當前使用的一些示例。