ng-bootstrap模态动画 [英] ng-bootstrap modal animation

问题描述

fade类似乎不适用于ngb-modal.

The fade class doesn't appear to work on the ngb-modal.

我已经研究过尝试将自己的动画应用于模式，但是ng-bootstrap例如将模式模板显然注入了模式对话框.我无权进行模态对话.我只能访问模板:

I've looked at trying to apply my own animation to the modal but the modal template is obviously injected into modal dialogue by ng-bootstrap e.g. I don't have access to the modal dialogue. I only have access to the template:

<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>

我需要将我的动画应用于顶级对话，否则就只是模态动画的一部分.如果我将其应用于模板，它会爆炸.

I need to apply my animation to the top level dialogue otherwise just bits of the modal animate. If I apply it to the template it blows up.

有什么主意我要为整个模态制作动画吗?

Any idea how I would animate the whole modal??

推荐答案

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

Here is simple solution. Just put it in 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)}
}

这篇关于ng-bootstrap模态动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！