Question

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

在选项中找不到任何内容。我应该修改源吗？或者，当您想要自定义时，是否有最佳实践？

Answer 1

目前，bootstrap类嵌入在指令中，需要重写。如果你想防止那种垂直的漂移＆＃39;进入模态窗口的位置，将以下两个类放在css中：

.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;
}

它将从顶部消除＆＃34;滑动＆＃34;动画和不透明度动画。我个人更喜欢只删除第一个并且只使用 top：25％！important;

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

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

对于特定模式

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

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

使用windowClass：

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

Answer 4

没有完整的答案，但是我遇到了类似的问题，并且认为我会参与其中。我知道这在角度ui / bootstrap 0.5中已经存在。可能会有0.6的重大变化，我正试图找到答案，但文档非常缺乏。

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

Answer 5

无论animation: false还是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>

关闭动画，模态，角度ui

5 个答案:

适用于所有模态

对于特定模式