UIBModal 动画覆盖

Question

我正在尝试覆盖 UIBModal 的默认动画。但是，这是行不通的。默认动画只运行。

.modal.modal-slide-in-right .modal-dialog {
  opacity: 0;
  -webkit-transform: translate(20%, 0%);
  -ms-transform: translate(20%, 0%);
  -o-transform: translate(20%, 0%);
  transform: translate(20%, 0%);
  -webkit-transition: all .3s cubic-bezier(.25, .5, .5, .9) 1s;
  -o-transition: all .3s cubic-bezier(.25, .5, .5, .9) 1s;
  transition: all .3s cubic-bezier(.25, .5, .5, .9) 1s;
}

.modal.modal-slide-in-right.in .modal-dialog {
  opacity: 1;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

http://plnkr.co/edit/YQ0eHIWrHlm90oW5oS4r?p=preview

Answer 1

您忘记将 extra.css 样式表插入 index.html

<link rel="stylesheet" href="extra.css">

这是一个有效的 plunk

UIBModal 动画覆盖

UIBModal animation override

angular-ui-bootstrap