Angular 动画离开过渡 child div

Question

进入动画效果很好，但离开动画效果不佳。如果我将@modalFadeZoom 移动到 parent 两个过渡都有效，但问题是缩放不是从模态中心发生的，这会产生奇怪的动画。

如果我将@modalFadeZoom 移动到child，淡入淡出效果很好。但在关闭模型时不会淡出和放大。

组件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 文件

    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 对于 modal-dialog

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

plnkr link

请注意，我已将 plnkr 演示中的动画移动到 parent 由于缩放，动画从中心开始。

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

Angular 在 *ngIf 中 children 时不播放离开动画。

Angular 动画离开过渡 child div

Angular animation leave transition on child div

angular

angular-animations