nganimate leave too long

Question

Я использую angular-ui-modal, который автоматически применяет классы nganimate при открытии и закрытии модального. Это вызывает всевозможные проблемы, не в последнюю очередь тот факт, что фон занимает некоторое время для удаления из dom после завершения моего пользовательского перехода css. Это трудно воспроизвести, но в основном у меня есть следующий SASS:

.modal-backdrop{ 

    background-color: black; 
    opacity: 0; 
    transition: all 4s ease-out; 

    &.in{ 
     opacity: 0.8; 
    } 

} 

Когда в классе добавляется, задник выцветает, но когда модальный закрыт задник выцветает, но остается в йоте с «инверсией удалить in-remove-active "классы, а затем применить классы ng-leave ng-leave-active, пока они не будут удалены.

Я не могу понять, как он рассчитывает, сколько времени ждать, прежде чем удалять из дома, но, похоже, связано с временем перехода, поставив его на 4 секунды, казалось, заставил его подождать около 6 секунд в - отменить стадию и 6 секунд на стадии ухода. Сокращение времени перехода на 1 секунду заставляло его ждать около 2 секунд на каждом этапе.

Материал ng-animate кажется полностью удаленным из ui-модального материала. Как черный ящик, в который вы не можете попасть. У u-модала, похоже, нет никаких настроек, чтобы изменить время, которое ожидают анимации, поэтому я могу только предположить, что он неправильно вычисляет его, глядя на мой css.

Answer 1

Я нашел два обходных решения.

1) не использовать указатель события ни остановить блокирование щий, как описано здесь - https://github.com/angular-ui/bootstrap/issues/5407

2) Используйте анимацию крючки JavaScript. Это не работало до недавнего обновления, но они говорят, что теперь оно исправлено. Код будет выглядеть следующим образом ...

angular.module('app').animation('.modal', [function() { 

return { 

    enter: function(element, doneFn) { 

     console.log("entering"); 

     $(element).css({ 
      'opacity': '0', 
      'background-color': 'black' 
     }).animate({ 
      opacity: 0.6 
     }, 200, doneFn); 

    }, 

    leave: function(element, doneFn) { 

     console.log("leaving"); 

     $(element).animate({ 
      opacity: 0 
     }, 200, doneFn); 

    } 
} 

}]); 

Извините за форматирование, похоже, вы не можете форматировать код легко на мобильную версию переполнения стека.