Слайд-эффект с помощью ngAnimate

Question

Слайд-эффект с помощью ngAnimate

0

Я пытаюсь получить эффект слайда с угловым и ngAnimate. Я отлично работаю, как эффект затухания/затухания с opacity.

.show-animation {
  -webkit-transition: 1s all linear;
   transition:all linear 1s;
   opacity: 1;
 }

.show-animation.ng-hide {
  opacity: 0;
}

Пример: https://jsfiddle.net/1bnpqpy8/10/

Но когда я пытаюсь использовать атрибут max-height для эффекта слайда, он больше не работает.

.show-animation {
  -webkit-transition: 1s all linear;
   transition:all linear 1s;
   max-height: 25px;
 }

.show-animation.ng-hide {
  max-height: 0;
}

Пример: https://jsfiddle.net/1bnpqpy8/11/

Почему ngAnimate не работает с max-height? Что я делаю неправильно?

Palmi 01 авг. 2016, в 01:00

Источник

Теги:

html

angularjs

css

1 ответ

Ещё вопросы

Simon C · Accepted Answer · 2016-07-31T23-59-00.000Z

Вам не хватает важного свойства css: overflow.

overflow сообщает div, что делать, если содержимое больше высоты (или max-height). Значение по умолчанию visible и поскольку один из ваших внутренних divs имеет установленную высоту (timelineVoid установленный на 20px), это заставит div быть видимым.

Вам необходимо переполнение (в частности, overflow-y), которое будет скрыто в вашем show-anomation div, чтобы содержимое было скрыто:

overflow-y: hidden;

вот скрипка: https://jsfiddle.net/5mr8azvn/