Question

使用带有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中删除，但是删除窗口和正文类会有延迟。

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

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

如果您检查代码，您将看到延迟，或者如果您关闭其中一个动画模式并立即尝试单击另一个按钮，则不会发生任何事情。

Answer 1

我也注意到了这个问题。我相信问题是UI模态背景的动画效果比模态本身更快。尝试覆盖用于淡入和淡出的背景类。

css类应该是

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

并且正在消失的那个应该是

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

如果您不想直接覆盖类，您还可以使用选项

将特殊类附加到模态背景

backdropClass : 'mySpecialClass'

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

1 个答案: