假期过长

Question

我正在使用angular-ui-modal，它在打开和关闭模态时会自动应用无关类。这导致了各种各样的问题，尤其是在我的自定义css转换完成后，背景需要一段时间才能从dom中删除。重现很难，但基本上我有以下SASS：

.modal-backdrop{

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

    &.in{
        opacity: 0.8;
    }

}

当添加类时，背景渐渐消失，但是当模态关闭时，背景会消失，但会在“删除in-remove-active”类中停留在dom中一段时间​​，然后“ng-保留ng-leave-active“类，直到它被删除。

我似乎无法弄清楚它是如何计算从dom中移除之前要等多久但似乎与转换时间有关，将它放到4秒似乎让它等待大约6秒在ng-leave阶段中移除阶段和6秒。将过渡时间缩短到1秒使其在每个阶段等待大约2秒钟。

ng-animate的东西似乎完全从ui-modal东西中删除了。就像一个你无法进入的黑匣子。 ui-modal似乎没有任何设置来改变动画所花费的时间，因此我只能假设通过查看我的CSS来错误地计算它。

Answer 1

我找到了两个解决方法。

1）使用指针事件无阻止ui的阻塞，如此处所述 - 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);

    }
}

}]);

很抱歉格式化，看起来您无法在移动版Stack Overflow上轻松格式化代码。