关闭动画,模态,角度ui

Question

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

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

Answer 1

目前,引导类嵌入在指令中,需要重写.如果要防止垂直"漂移"到模态窗口的位置,请在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

animation(类型:boolean,默认值:) true- 设置false为禁用新模态/背景上的动画.不为已经显示的模态/背景切换动画.

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

Answer 3

关闭动画的一种简单方法是在模态中添加!重要样式.

适用于所有模态

您可以使用此CSS类对所有模态进行全局操作(将其放在css中的任何位置):

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

它将消除"从顶部滑动"动画以及不透明度动画.我个人更喜欢只消除第一个并且只使用顶部:25%!重要;

您还可以使用此类消除全局背景动画(将其放在您的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'
});