带有 Angular 动画“：离开”的 ng 引导模式不起作用？答案

【问题标题】：ng bootstrap modal with Angular animation ':leave' not working?带有 Angular 动画“：离开”的 ng 引导模式不起作用？
【发布时间】：2020-04-07 18:48:20
【问题描述】：

为什么我的退出动画“离开”不起作用？进入动画效果很好但离开（退出）不起作用？请检查我的代码并给我提示？

      animations: [
        trigger('bubbleGrow', [
          transition(':enter', [
            animate('1000ms ease-in-out',  keyframes([
              style({transform: 'scale(0.5)'}),
              style({transform: 'scale(1)'}),
            ]))
          ]),
          transition(':leave', [
            animate('1000ms ease-in-out',  keyframes([
              style({transform: 'scale(1)'}),
              style({transform: 'scale(1.1)'}),
              style({transform: 'scale(0)'})
            ]))
          ]),
        ])
      ]


     constructor(private modalService: NgbModal, private activeModal: NgbActiveModal){}


      close() {
        this.activeModal.close();
      }

    <div class="modal-body" [@bubbleGrow]>
      Here is my code in modal....
        <button type="button" class="close" (click)="close()" >
         <span aria-hidden="true">&times;</span>
        </button>
    </div>

【问题讨论】：

问题是，您使用的是 ng 引导模式，该模式通过 Angular 渲染呈现，这就是触发“：enter”的原因，但通过引导逻辑将其删除。您的“：离开”触发器不会被触发，因为您的角度渲染生命周期不会将其注册为“离开”，因此不会发生动画。您可以通过关闭延迟“ngClass”和动画淡出动画来解决问题。
哎呀？怎么办？
看看这个stackoverflow.com/questions/42610974/…
我看到了，但是这样不会关闭对话框并设置两个对话框打开..
@Luxusproblem 我正在看这个，但我不知道有什么问题？动画淡入作品，但淡出无作品。我需要淡出..

标签： javascript css angular twitter-bootstrap

【解决方案1】：

因此，如果您想要淡出动画，则需要延迟和动画。首先创建一个带有动画的css-class：


@keyframes fadeout{
0%{  transform:scale(1);}
50%{ transform:scale(1.1);}
100%{ transform:scale(0);}
}

.fade-out{
 animation: fadeout 2s linear;
}

然后在您的 close() 方法中创建一个延迟并通过“ngClass”应用动画组件：



export class YourClass{
      // this is to mark if you are about to close the modal, to trigger the animation
      public isClosing = false;

      constructor(private modalService: NgbModal, private activeModal: NgbActiveModal){}


      close() {
        // here you "mark" the closing state
        isClosing=true;
        // create a delay of 2 seconds. Otherwise the animation will not be applied
        // because the modal will be closed instantly
        timer(2000).subscribe(()=>{
         this.activeModal.close();
        }
      }
}

在你的 html 中：

    <div class="modal-body" [ngClass]="{'fade-out':isClosing}" [@bubbleGrow]>
      Here is my code in modal....
        <button type="button" class="close" (click)="close()" >
         <span aria-hidden="true">&times;</span>
        </button>
    </div>

当 "isClosing" 设置为 true 时，这将启动动画。

[ngClass]="{'fade-out':isClosing}"

这是一种解决方法。但应该做交易。

【讨论】：