Почему анимация не работает для максимальной высоты?

Question

Согласно this answer мы можем анимировать max-height свойства, однако по какой-то причине анимация не применяются к max-height указанному свойству, как это (see plunker):

.animated-div { 
    overflow: hidden; 
    background: lightblue; 
    opacity:1; 
    height:500px; 
} 

.animated-div.ng-hide-add.ng-hide-add-active, 
.animated-div.ng-hide-remove.ng-hide-remove-active { 
    transition:all linear 0.5s; 
} 

.animated-div.ng-hide { 
    height:0; 
    opacity:0; 
} 

Но если я изменю макс-высоту до высоты она хорошо работает , В чем проблема?

Answer 1

Все работает отлично, но ваш пример не настроен должным образом, чтобы продемонстрировать эффект. animated-div просто недостаточно высок, чтобы видеть эффект, до того, как макс-высота ударит, непрозрачность уже настолько низка, вы больше не видите эффект.

Для демонстрации см. Мой updated fork (я добавил больше текста, удалил изменение непрозрачности и сделал переход за две секунды для демонстрационных целей, а переход работает при наведении, чтобы увидеть эффект несколько раз без перезапуска/перезагрузки).