angular-ui - 关闭动画、模态、angular-ui

Question

是否可以在angular-ui中关闭模态指令的动画？http://angular-ui.github.io/bootstrap/

在选项中找不到任何东西。我应该修改源吗？或者当你想定制时有什么最佳实践吗？

Answer 1

目前，引导类嵌入在指令中，需要被覆盖。如果您想防止垂直“漂移”到模态窗口的位置，请在您的 css 中放置以下 2 个类：

.modal.fade {
  opacity: 1;
}

.modal.fade .modal-dialog, .modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

您将在这里完成的是对现有翻译的否定。不理想，但是会成功的。

Answer 2

动画（类型：boolean，默认值：）true- 设置false为禁用新模式/背景上的动画。不切换已显示的模式/背景的动画。

var modalInstance = $uibModal.open({
  animation: false

Answer 3

关闭动画的一种简单方法是向模态框添加!important样式。

对于所有模态

您可以使用此 CSS 类对所有模式全局执行此操作（将其放在您的 css 中的任何位置）：

.modal {
   top: 25% !important;
   opacity: 1 !important;
}

它将消除“从顶部滑动”动画以及不透明动画。就我个人而言，我更喜欢只消除第一个并只使用top: 25% !important;

您还可以使用此类全局消除背景动画（将其放在 css 中的任何位置）：

.modal-backdrop {
   opacity: 0.8 !important;
}

对于特定模式

您可以使用windowClass参数消除特定模式的动画。

.no-animation-modal {
  top: 25% !important;
  opacity: 1 !important;
}

使用窗口类：

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: ModalInstanceCtrl,
  windowClass: 'no-animation-modal'
});

Answer 4

没有完整的答案，但我遇到了类似的问题，并认为我会插话。我知道这在 angular-ui/bootstrap 0.5 中曾经是可能的。0.6 中可能会有重大更改，我正在尝试寻找答案，但文档非常缺乏。

这是0.5中给出的示例。请注意，您可以设置类似的选项，backdropFade但我在 0.6 中找不到等价的选项。可能与删除$dialogProvider 有关。

Answer 5

以下对我来说效果很好，无论是animation: falseor animation: true：

<style>
        .modal.fade {
            opacity: 1;
        }

        .modal.fade .modal-dialog, .modal.in .modal-dialog {
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        .modal-backdrop {
            opacity: 0.8 !important;
        }

</style>