问题描述
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模态动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!