在 windowClass 中使用 animate.css 类时的 UI Bootstrap 模态延迟答案

【问题标题】：UI Bootstrap Modal delay when using animate.css classes in windowClass在 windowClass 中使用 animate.css 类时的 UI Bootstrap 模态延迟
【发布时间】：2017-01-16 03:20:48
【问题描述】：

我在使用带有 UI-Bootstrap windowClass 选项的 animate.css 类时遇到问题。

例如：

vm.open = function() {
      var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        controllerAs: 'vm',
        windowClass: 'animated zoomIn',     // Issue is over here.
        resolve: {
          items: function() {
            return vm.items;
          }
        }
      });

当模态打开时一切看起来都很好，但是当模态关闭时会有延迟。背景 op ui-bootstrap 会立即从 DOM 中移除，但移除 window 和 body 类会有延迟。

我做了一个代码笔来说明我的意思。第一个按钮是没有屏幕类的普通模式（工作 100%），另外两个“动画”按钮是我使用 animate.css 类的地方。

http://codepen.io/DickSwart/pen/XjbkYw

如果您检查代码，您将看到延迟，或者如果您关闭其中一个动画模式并立即尝试单击另一个按钮，则没有任何反应。

【问题讨论】：

标签： javascript angularjs bootstrap-modal angular-bootstrap animate.css

【解决方案1】：

我也注意到了这个问题。我认为问题在于 UI 模态背景的动画速度比模态本身快。尝试覆盖用于淡入和淡出的背景类。

css 类应该是

.fade.in { /*override transition time here */}

而正在消失的应该是

.fade.out { /*override transition time here */}

如果您不想直接覆盖类，也可以使用选项将特殊类附加到模态背景

backdropClass : 'mySpecialClass'

【讨论】：