I am having the same issue described here: [2.0.0-Beta8] Modal animation issue, however there are reasonable differences to open another post:
The reasons:
a) This is happening after upgrading to beta 11 (the mentioned post refers to beta 8)
b) The issue described is fixed using ngZone.run({}), that doesn’t work in this case.
c) The solution in the post refers to the fact that a transition needs to finish before the next one can begin, therefore, using the dismiss().then() promise solves the idea in the context of calling a modal within an ActionSheet, however my case is totally different, since I have no animations running (other than the ionic button that is to be pressed in order to call the method that loads the modal). The only thing is that I am calling the modal within a .subscribe() method of an asynchronous call.
The Behavior: The modal opens but it is practically invisible, it renders, it is there, it even animates its entrance by sliding from bottom to top of the page (barely visible). It result obvious that within the css for md there is an effect, as yo can find in:
================================================================================
ionic.css: 9858
.md .modal-wrapper {
opacity: .01;
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0); }
================================================================================
/node_modules/ionic-angular/components/modal/modal.md.scss
@import “…/…/globals.md”;
// Material Design Modals
// --------------------------------------------------
$modal-md-background-color: $background-md-color !default;
.modal-wrapper {
opacity: .01;
transform: translate3d(0, 40px, 0);
}
So, it is intended that the modal starts almost invisible, so it is supposed to run an animation to increase the opacity altogether with the one that does the slide up effect right? Well, for some reason the opacity animation is not working, I don’t know if this is just for me or if this is happening to everybody, I doubt it, but here is the offending code (beta 11).
The relevant code:
//----------------------------------------------------------------------------------------------
// Private Methods Section:
//----------------------------------------------------------------------------------------------
private showModalForTicket(ticketId: string) : void
{
this.ticketService.getTicket(ticketId).subscribe((thisTicket) => {
let myTicketDetailsModal = this._modalController.create(
ModalMyTicketDetails,
{ ticket: thisTicket }
);
myTicketDetailsModal.present();
});
}
What I tried:
Double verified that the service returns proper data, (thisTicket), there are no Typescript errors, types are correct, instructions as found at the documentation were followed. I tried making myTicketDetails an instance field thinking that just maybe the myTicketDetailsModal var could get out of scope, it didn’t work. ngZone didn’t work either.
What is working for now:
The solution that is working for me now was to add to app.scss:
.modal-wrapper
{
opacity: 1;
}
Conclusion:
it works, but obviously there is no animation for opacity (I am supposing there should be). I think that this is a very dirty hack, I am not happy with it, and as iignatov mentioned on the referred post, this is an issue with Angular detection (maybe the case here?) that I will have to deal with sooner or later.
I think the sooner the wiser… I am intrigued about if anybody else is experiencing this issue when opening modals under beta 11, is this an issue with the beta? is this something wrong with my environment? I doubt it, but I am open to any ideas now.
Has this happened to you? Do you have any idea of why this may be happening? Does it have anything to do that I am calling the modal within a subscribe() method of an observable?
Thanks for reading the whole thing if you did… 
