子アニメーションの角アニメーションを残す

Question

アニメーションの入力は正常ですが、残しアニメーションは機能しません。 @modalFadeZoomを親の両方のトランジションに移動すると動作しますが、問題はモーダルの中央からスケーリングが起こっていないことです。これは不思議なアニメーションを与えています。

@modalFadeZoomを子に移動すると、フェードインズームアウトがうまく動作します。 しかし、モデルを閉じるときにフェードアウトしたり拡大したりすることはありません。

コンポーネントのHTML

<div class="modal-dialog" *ngIf="showModal"> 
     <div class="modal-content" [@modalFadeZoom]> 
      <div class="modal-header"> 
       <h5 class="modal-title">SOME TITLE</h5> 
       <button type="button" (click)="showModal=false" class="close" aria-label="Close"> 
      <span aria-hidden="true">×</span> 
     </button> 
      </div> 
      <div class="modal-body"> 
       lorem ipsum etc etc 
      </div> 
     </div> 
    </div> 
    <div class="modal-backdrop fade show" *ngIf="showModal"></div> 

TSモーダルダイアログ

.modal-dialog { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    height: auto; 
    z-index: 2000; 
    transform: translateX(-50%) translateY(-50%); 
} 

plnkrリンクため

import { Component, OnInit, trigger, transition, style, animate } from '@angular/core'; 

    @Component({ 
     templateUrl: 'modal.template.html', 
     animations: [ 
      trigger(
       'modalFadeZoom', 
       [ 
        transition(
         ':enter', [ 
          style({ transform: 'scale(.7)', opacity: 0 }), 
          animate('0.3s', style({ opacity: 1, transform: 'scale(1)' })), 
         ] 
        ), 
        transition(
         ':leave', [ 
          style({ opacity: 1, transform: 'scale(1)' }), 
          animate('5.3s', style({ opacity: 0, transform: 'scale(.7)' })), 
         ] 
        ), 
       ]) 
     ] 
    }) 

    export class ModalComponent implements OnInit { 

     private showModal = false;; 

     ngOnInit(): void { 
      this.showModal = true; 
     } 
    } 

CSSファイル

私はplnkrデモで親にアニメーションを移動したことに注意してください スケーリングのためにアニメーションが中心から始まります。

https://plnkr.co/Ldn4wJwuZMaaunVWuYpx

Answer 1

これにアニメーションの宣言を変更

：

trigger(
    'modalFadeZoom', 
    [ 
    transition(
     ':enter', [ 
     style({ transform: 'translateX(-50%) translateY(-50%) scale(.7)', opacity: 0 }), 
     animate('0.3s', style({ opacity: 1, transform: 'translateX(-50%) translateY(-50%) scale(1)' })), 
     ] 
    ), 
    transition(
     ':leave', [ 
     style({ opacity: 1, transform: 'translateX(-50%) translateY(-50%) scale(1)' }), 
     animate('5.3s', style({ opacity: 0, transform: 'translateX(-50%) translateY(-50%) scale(.7)' })), 
     ] 
    ), 
    ]) 

そして、最も外側の要素（model-dialog）にアニメーションを移動します。

* ngIf内の子供の場合、角膜はアニメーションを残して再生されません。