title: Router navigate on Ionic with animation blinking on ios using angular animations
body: <p>I am setting page transitions between two pages on Ionic (v4) with @angular/animations and it all works great on chrome but not on safari.</p>
  
  <p>On a simple app only with two pages (eagerly loaded) I still have the problem, independent of the property that I try to animate. The blinking only goes away if I create an empty animation, but it is not the goal. Also, I am using eager loading.</p>
  
  <p>animations.ts</p>
  
  <pre><code> export const fadeIn =
      trigger('fadeIn', [
        state('entering', style({ //styles to be transitioned
          opacity: 1,
  
        })),
        transition("* =&gt; entering", [ //this styles will enter before the animation starts
            style({
              opacity: 0,
              display: block
            }),
            animate('500ms')
        ]),
  
        state('leaving', style({  //this styles will enter when the animation ends
          opacity: 0,
          display: none
        })),
        transition("* =&gt; leaving", [ //styles to be transitioned
          animate('220ms', style({
            opacity: 0,
          }))
        ]),
  </code></pre>
  
  <p>page1.ts</p>
  
  <pre><code>... 
  anim = ''
  import { fadeIn } from '../animations/animations'
  import { Router } from '@angular/router'
  ...
  @Component({
    selector: 'page-1',
    templateUrl: './page1.html',
    styleUrls: ['./page1.scss'],
    animations: [ fadeIn ]
  })
  
  constructor(private router: Router){ }
  
  ionViewWillEnter(){
    this.anim = 'entering'
  }
  
  nextPage(){
    this.router.navigate(['/page2'])
  }
  
  </code></pre>
  
  <p>page2.ts</p>
  
  <pre><code>... 
  import { fadeIn } from '../animations/animations'
  import { Router } from '@angular/router'
  ...
  anim = ''
  @Component({
    selector: 'page-2',
    templateUrl: './page2.html',
    styleUrls: ['./page2.scss'],
    animations: [ fadeIn ]
  })
  
  constructor(private router: Router){ }
  
  ionViewWillEnter(){
    this.anim = 'entering'
  }
  
  previousPage(){
    this.anim = 'leaving'
    setTimeout(() =&gt; {
      this.router.navigate(['/page1'])
    }, 200) //220 is the actual time to the transition end, but 200 to make sure that the blinking is not by an 'empty animation state'
  }
  </code></pre>
  
  <p>page1.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ion-content [@fadeIn]='anim'&gt;
    &lt;h1&gt; This is the first page!
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>page2.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ion-content [@fadeIn]='anim'&gt;
    &lt;h1&gt; This is the second page!
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>page1.scss and page2.scss</p>
  
  <pre class="lang-css prettyprint-override"><code>ion-content{
    display: none;
    opacity: 0;
  }
  </code></pre>
  
  <p>global.scss</p>
  
  <pre class="lang-css prettyprint-override"><code>@import "~@ionic/angular/css/core.css";
  html &gt; body &gt; app-root &gt; ion-app &gt; ion-router-outlet &gt; .ion-page-hidden {
    display: flex !important;
  }
  ...
  </code></pre>
  
  <p>To illustrate the issue better I recorded it in slow motion and uploaded to <a href="https://giphy.com/gifs/Zb6YrET2x2jaRy2bZm" rel="nofollow noreferrer">Giphy</a></p>
  
  <p>I expected the same result that I had on chrome on safari, which is the use of this animation structure without blinking between pages</p>