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

残念ながら、ng-bootstrapsモーダルのアニメーションはまだサポートされていません。

open(content, config) { 
    this.ngbModal.open(content); 
    $('.modal-content').animate({ opacity: 1 }); 
    $('.modal-backdrop').animate({ opacity: 0.9 }); 

    } 

とルートStyles.cssをであなたも必要です： は以外にも、私はアニメーション化するjqueryのを使用して回避策を作るために管理

.modal-backdrop.show { 
    opacity: 0; 
    transition: 4s; 
} 

.modal-content { 
    opacity: 0; 
    transition: 0.15s; 
}