角度动画在子div上留下过渡 [英] Angular animation leave transition on child div

问题描述

Enter动画可以正常工作，但是请假动画不能正常工作.如果我将@modalFadeZoom移到父级，则两个过渡都可以正常工作，但是问题是缩放不是从模态的中心发生，这会产生奇怪的动画.

Enter animation is working fine, but the leave animation is not working. if I move the @modalFadeZoom to parent both transitions works, but the problem with that is the scaling is not happening from center of the modal, which is giving weird animation.

如果我将@modalFadeZoom移至子级，则缩小效果很好.但不会淡出并放大以关闭模型.

If i move @modalFadeZoom to the child the fade in zoom out is working fine. but no fade out and zoom in on closing the model.

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

css for modal-dialog

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

plnkr链接

请注意，我已在plnkr演示中将动画移至父级动画由于缩放而从中心开始.

notice that i have moved animation to parent in the plnkr demo animation starts off from the center, because of scaling.

https://plnkr.co/Ldn4wJwuZMaaunVWuYpx

推荐答案

将动画声明更改为此:

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

And move the animation to the outermost element(model-dialog).

当它们是* ngIf中的子对象时，Angular不会播放剩余动画.

Angular doesn't play leaving animations when they're children inside an *ngIf.

这篇关于角度动画在子div上留下过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！