ng-bootstrap模态动画

Question

淡入淡出类似乎不适用于ngb-modal.

我已经看过尝试将自己的动画应用到模态,但模态模板显然是通过ng-bootstrap注入到模态对话中,例如我无法访问模态对话框.我只能访问模板:

<template #content let-c="close" let-d="dismiss">
  <div class="modal-header card-header" style="border-radius: 10px;">
    <h4 class="modal-title">Contact Form</h4>
 </div>
    <div class="modal-body"> </div>
...etc
</template>

我需要将我的动画应用到顶级对话,否则只需要模态动画的位.如果我将它应用到模板,它就会爆炸.

知道如何动画整个模态吗？

Answer 1

这是简单的解决方案。只需将其放在style.css中

/* modal animation */
.modal-content{
  animation-name: example;
  animation-duration: 0.3s;
}

@keyframes example {
  0%   {transform: scale(0.5)}
  75%  {transform: scale(1.1)}
  100% {transform: scale(1)}
}

Answer 2

您需要将动画 css 类添加到全局样式并添加 NgbModalOptions。

style.css: // 或者任何你的全局 css

.modal-holder{
  animation-name: example;
  animation-duration: 0.3s;
}

@keyframes example {
  0%   {transform: scale(0.5)}
  100% {transform: scale(1)}
}

modal.component.ts

const modalRef = this.modalService.open(NgbdModalContent, {windowClass: 'modal-holder', centered: true});

说得够多了，你可以看到以下示例：

闪电战