时间戳

首页 > 解决方案 > 带有 Angular 动画“：离开”的 ng 引导模式不起作用？

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

问题描述

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

      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>

标签： javascriptcssangulartwitter-bootstrap

解决方案

所以如果你想要一个淡出动画，你需要一个延迟和一个动画。首先创建一个带有动画的 CSS 类：


@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}"

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

推荐阅读