angularjs - 具有最大宽度的 ngHide 和 ngAnimate：错误类上的转换属性？

Question

我正在使用 ngAnimate 为 max-height 设置动画以获得简单的滑动切换效果，并且发生了一些奇怪的事情：当 hide 时，似乎在 setup 类 ( .xxx-hide) 上设置 transition 属性不起作用——高度立即捕捉到 0：

.controls-hide {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;

  max-height: 5em;
  opacity: 1;
}

.controls-hide.controls-hide-active {
  max-height: 0em;
  opacity: 0;
}

但是将它设置在活动类（.xxx-hide.xxx-hide-active）上，动画效果很好：

.othercontrols-hide {
  opacity: 1;
  max-height: 5em;
}
.othercontrols-hide.othercontrols-hide-active {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;

  max-height: 0em;
  opacity: 0;
}

（这是整个小提琴。）

更奇怪的是，在这两种情况下，不透明度的动画效果都很好。这里发生了什么？

Answer 1

我只是按照此站点上的说明进行操作：http ://www.nganimate.org/angularjs/ng-repeat/appear

我得到了这个小提琴：http: //jsfiddle.net/WXWSu/2/

我所做的更改是将转换标记设置为所有更改（transition: 1s linear all;），并在主类中设置启动属性：

.exercise-controls {
    overflow: hidden;
    border: 1px solid black;    
    height: 5em;
    opacity: 1;
}