Question

我正在使用ngAnimate为一个简单的幻灯片切换效果设置max-height动画，并且发生了一些奇怪的事情：当隐藏时，似乎在设置类上设置了transition属性（.xxx-hide）不起作用 - 高度立即捕捉到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;
}

（这是whole fiddle.）

更奇怪的是，在这两种情况下，不透明度都很好。这是怎么回事？

Answer 1

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

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

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

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

ngHide和ngAnimate在错误的类上使用max-width：transition属性？

1 个答案: