css - 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

编辑:我更新了我的 plunker 以更好地解决您关于 ng-animate 的问题。如果您使用的是 angular 1.1.5 或更早版本，您仍然可以使用 ng-animate。从 1.2 版开始，ng-animate 指令已弃用。在 plunker 更新中，我包含了一些当前使用 angular-animate 的示例。