How to change Modal animation to "Fade in" And "Fade out"?

Ionic Framework ionic-v3
1

Hello, I want to change the modal animation when open and close from “modal-slide-in” and “modal-slide-out” to “fade-in” and “fade-out” just for one modal page, but I don’t have any idea how to do this.

2

set $ionicModal animation into 'fade-in’
follow this code.

  $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope,
    animation: 'fade-in'
  }).then(function(modal) {
    $scope.modal = modal;
  });

Cheers…

3

@udithaprasad , thanks you for help, I am using ionic 3, and I don’t know how to convert this code to ionic 3. can you explain me how to make this work in ionic 3.

4

Good question

Looking at the ionic modalcontroller docs it seems there is nothing there yet, also not in sass.

So that likely requires some custom css or angular animations

Looking forward to an answer

Tom

5

Please refere onderceylan answer here…
[Ionic 2 Modal animations and custom animations?]

1 Like
6

It might be an idea to look at app.component.ts where you can globally configure some of the stuff you had to program in the older versions

  imports: [
    IonicModule.forRoot(GemeApp,{
      backButtonText:'',
      backButtonIcon:'close',
      iconMode: 'md',
      modalEnter: 'modal-slide-in',
      modalLeave: 'modal-slide-out',
      tabsPlacement: 'bottom',
      pageTransition: 'ios-transition'
    }),

But I haven’t tested this, but I think iit is worth a try