ngAnimate - Как удалить добавленную задержку NgLeave?

Question

Я создаю приложение angularJs, которое должно иметь div, появляющееся и исчезающее, расширяя и сокращая его, содержащее div. Я использую ngAnimate для управления анимацией специальными классами «ng-» css. демо, похоже, работает, но есть странная задержка в команде ng-leave. В моем примере div начинает расти сразу же, когда вы отпускаете мышь на кнопке. Однако при закрытии div существует очень заметная временная задержка между нажатием кнопки и началом деления. Вы можете увидеть этот вопрос здесь:

http://jsfiddle.net/evoilliot/7tb4g/

<div ng-app="myApp"> 
    <div ng-controller="AppCtrl"> 
     <input type="checkbox" ng-model="showDiv" id="showDiv" /> 
     <label for="showDiv">Toggle DIV</label> 
     <div id="my-div" ng-if="showDiv" class="animate-if">He ben voilà, ça fonctionne !</div> 
    </div> 
</div> 

_

#my-div { 
    background-color: cornflowerblue; 
    /* pour l'ex, on met une hauteur au div, pour qu'il soit suffisament 
    haut pour le voir bien... */ 
    height: 200px; 
} 
/* 
Pour dire en CSS3 ce qui devra être animé : 
Angular ajoute dynamiquement des classes CSS. 
La transition se fait soit entre ng-enter et ng-enter-active 
ou entre ng-leave et ng-leave-active. 
*/ 
.animate-if.ng-enter, .animate-if.ng-leave { 
    -webkit-transition: 1s linear all; 
    -moz-transition: 1s linear all; 
    -ms-transition: 1s linear all; 
    -o-transition: 1s linear all; 
    transition: 1s linear all; 
} 
/* du début de l'entrée */ 
.animate-if.ng-enter { 
    max-height: 0; 
    opacity: 0; 
} 
/* à la fin de l'entrée */ 
.animate-if.ng-enter.ng-enter-active { 
    max-height: 999px; 
    opacity:1; 
} 
/* du début de la sortie */ 
.animate-if.ng-leave { 
    max-height: 999px; 
    opacity:1; 
} 
/* à la fin de la sortie */ 
.animate-if.ng-leave.ng-leave-active { 
    max-height: 0; 
    opacity:1; 
} 

Является ли это ошибка в ngAnimate? Я просто делаю что-то не так? Спасибо.

Answer 1

Причина, по которой это происходит, состоит в том, что ваш содержащий div имеет высоту 200 пикселей, но ваша анимация увеличивает внутренний div до 999px. Когда вы запускаете сокращающуюся анимацию, она, кажется, задерживается, потому что вы не видите лишних 799 пикселей. Если вы измените «максимальную высоту» на 200 пикселей в каждой из ваших анимаций, она должна работать правильно. Решение задержки

Answer 2

Updated fiddle

Исправление:

Поместите кубический Безье (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; 
}