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的问题。如果您使用的是角度1.1.5或更早版本，您仍然可以使用ng-animate。从版本1.2开始，不推荐使用ng-animate指令。在plunker更新中，我已经包含了一些角度动画当前用法的例子。

ngAnimate ngShow高度转换

1 个答案: