nganimate 请假时间过长

Question

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

.modal-backdrop{

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

    &.in{
        opacity: 0.8;
    }

}

添加 class 时，背景淡入，但是当关闭模式时，背景淡出但保持在 dom 和 "in-remove in-remove-active" classes 一段时间，然后应用 "ng-leave ng-leave-active" classes 直到它被删除。

我似乎无法弄清楚它是如何计算从 dom 中删除之前要等待多长时间的，但这似乎与过渡时间有关，将其设置为最多 4 秒似乎可以让它等待in-remove 阶段 6 秒，ng-leave 阶段 6 秒。将过渡时间减少到 1 秒，使其在每个阶段等待约 2 秒。

ng-animate 内容似乎已从 ui-modal 内容中完全删除。就像一个你无法进入的黑匣子。 ui-modal 似乎没有任何设置来改变动画所花费的时间所以我只能通过查看我的 css.

来假设它计算不正确

Answer 1

我找到了两个解决方法。

1) 使用指针事件 none 停止 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 上轻松地格式化代码。

nganimate 请假时间过长

nganimate leave taking too long

angularjs

angular-ui

ng-animate