переход max-height в браузере webkit

Question

Я пытаюсь анимировать ng-при использовании свойства max-height, но не могу заставить его работать в Chrome. (Он работает в Firefox.) Я что-то упустил или это ошибка в Chrome?

.slide-down-up { 
    background:green; 
    border:1px solid black; 
    padding:10px; 
    overflow: hidden; 
} 

.slide-down-up.ng-enter { 
    transition: max-height 0.5s ease-in;  
    max-height: 0; 
} 

.slide-down-up.ng-enter.ng-enter-active, 
.slide-down-up.ng-leave { 
    max-height: 600px; 
} 

.slide-down-up.ng-leave.ng-leave-active { 
    max-height: 0; 
} 

.slide-down-up.ng-leave { 
    transition: max-height 0.5s ease-out; // doesn't work 
    transition: max-height 1s ease-out; // works  
} 

Здесь plunker: http://plnkr.co/edit/VpRQK4sNyXnu6U8SbxtP?p=preview

Answer 1

Updated Plunker

раствор Задержка Исправление:

Поместите кубический Безье (0, 1, 0, 1) функция переходов для элемента.

.text { 
    overflow: hidden; 
    max-height: 0; 
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); 
    &.full { 
    max-height: 1000px; 
    transition: max-height 1s ease-in-out; 
}