在windowClass中使用animate.css类时，UI引导模式延迟

UI Bootstrap Modal delay when using animate.css classes in windowClass

本文关键字：UI 延迟 模式 类时 css windowClass animate      更新时间：2023-09-26

我在使用animate.css classes with UI-Bootstrap windowClass选项时遇到了问题。

例如:

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中移除，但是移除窗口和主体类会有延迟。

我做了一个代码笔来说明我的意思。第一个按钮是没有屏幕类的正常模式(Work 100%)，其他两个"动画"按钮是我使用animate.css类的地方。

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

如果你检查代码，你会看到延迟，或者如果你关闭一个动画模态并立即尝试点击另一个按钮，什么也没有发生

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

CSS类应该是

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

，而for正在消失的应该是

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

如果你不想直接覆盖这些类，你也可以使用选项

为模式背景附加特殊的类
backdropClass : 'mySpecialClass'
相关文章：