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当前使用的一些示例。