L'animation angulaire laisse la transition sur l'enfant div

Question

L'animation de saisie fonctionne correctement, mais l'animation de congé ne fonctionne pas. Si je déplace le @modalFadeZoom vers parent les deux transitions fonctionne, mais le problème est que la mise à l'échelle ne se passe pas du centre du modal, ce qui donne une animation étrange.

Si je déplace @modalFadeZoom vers l'enfant, le fondu en zoom arrière fonctionne correctement. mais pas de fondu et de zoom avant la fermeture du modèle.

composant 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 déposer

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

pour Dialoguer css modale

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

lien plnkr

remarquez que j'ai déplacé l'animation à parent dans la démo plnkr l'animation commence à partir du centre, en raison de la mise à l'échelle.

https://plnkr.co/Ldn4wJwuZMaaunVWuYpx

Answer 1

Changer votre déclaration d'animation à ceci:

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)' })), 
     ] 
    ), 
    ]) 

Et déplacer l'animation à l'élément le plus extérieur (model-dialog).

Angular ne joue pas en laissant des animations lorsqu'il est enfant dans un * ngIf.