CODEWITHSUNDEEP
javascriptcssangulartwitter-bootstrap
TEtet
TEtet

Reputation: 139

ng bootstrap modal with Angular animation ':leave' not working?

Why my exit animation 'leave' isn't working? Animation for enter works perfectly but for leave(exit) is not working? Please check my code and give me hint?

      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>

Upvotes: 1

Views: 1920

Answers (1)

CaspianTerrazzo
CaspianTerrazzo

Reputation: 2148

So if you want a animation for the fadeout you need a delay, and a animation. First create a css-class with a animation: 


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

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

Then create a delay in your close() method and apply the animation via "ngClass" component:



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

In your 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>

This will start the animation, when "isClosing" is set to true.

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

This is a workaround. But should do the deal.

Upvotes: 1

Related Questions