ngHide и ngAnimate с максимальной шириной: свойство перехода в неправильном классе?

Я использую ngAnimate для анимации максимальной высоты для простого эффекта переключения слайдов, и происходит что-то немного странное: при скрытии кажется, что установка свойства перехода в классе установки (.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;
}

Но установив его в классе active (.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;
}

(Вот целая скрипка.)

Что еще более странно, в обоих случаях непрозрачность анимируется просто отлично. Что тут происходит?


angularjs css-transitions ng-animate
person anandthakker    schedule 23.07.2013    source источник
comment
Я вижу такое же поведение, но я устанавливаю свойство перехода в css самого элемента (в анимации javascript). Я установил для свойства значение «высота» (или даже «все»), и к моменту применения ng-hide для свойства перехода было установлено значение «нет». У меня нет никаких классов для элемента, кроме ng-hide, и что-то перезаписывает встроенные стили элемента!   -  person Riley Lark    schedule 02.12.2013

Ответы (1)


arrow_upward
1
arrow_downward

Я просто следую инструкциям на этом сайте: 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;
}
person Bruno Croys Felthes    schedule 24.07.2013
comment
Спасибо, Бруно - это, безусловно, работает нормально, но я все же хотел бы понять, ПОЧЕМУ непоследовательное поведение в моем примере... - person anandthakker; 31.07.2013
comment
В вашем примере много ошибок. Но я думаю, что такое поведение происходит из-за того, что вы не установили переходы для всех изменений transition: 1s linear all - person Bruno Croys Felthes; 31.07.2013