Маршрутизатор на Ionic с анимацией, мигающей на IOS с использованием угловой анимации

Question

Я устанавливаю переходы страниц между двумя страницами на Ionic (v4) с помощью @ angular / animations, и все это отлично работает на Chrome, но не на Safari.

В простом приложении только с двумя страницами (загруженными) у меня все еще есть проблема, независимо от свойства, которое я пытаюсь оживить. Мигание исчезает, только если я создаю пустую анимацию, но это не цель. Также я использую готовую загрузку.

animations.ts

 export const fadeIn =
    trigger('fadeIn', [
      state('entering', style({ //styles to be transitioned
        opacity: 1,

      })),
      transition("* => 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("* => leaving", [ //styles to be transitioned
        animate('220ms', style({
          opacity: 0,
        }))
      ]),

page1.ts

... 
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'])
}

page2.ts

... 
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(() => {
    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'
}

page1.html

<ion-content [@fadeIn]='anim'>
  <h1> This is the first page!
</ion-content>

page2.html

<ion-content [@fadeIn]='anim'>
  <h1> This is the second page!
</ion-content>

page1.scss и page2.scss

ion-content{
  display: none;
  opacity: 0;
}

global.scss

@import "~@ionic/angular/css/core.css";
html > body > app-root > ion-app > ion-router-outlet > .ion-page-hidden {
  display: flex !important;
}
...

Чтобы лучше проиллюстрировать проблему, я записал ее в замедленном режиме и загрузил в Giphy

Я ожидал того же результата, что и на Chrome в Safari, - использование этой структуры анимации без мерцания между страницами

Answer 1

Я добавлю этот ответ, так как это немного долго, чтобы быть комментарием.Как мы уже обсуждали в комментариях, проблема заключается в том, что ваша анимация конфликтует со стандартной анимацией перехода страницы iOS

Рекомендуемый способ устранения этой проблемы - создайте собственную анимацию перехода страницы , как вы видите в этом ответе .При этом ваша пользовательская анимация переопределяет стандартную «анимацию» всех ion-nav и ion-router-outlet во всем приложении .

Если по какой-то причине вы просто хотите использовать угловую анимациюна каждой странице - как вы делаете в своем коде, используя что-то вроде

<ion-content [@fadeIn]='anim'> 
  ...
</ion-content>

, вы можете отключить анимацию перехода страниц по умолчанию Ionic с помощью Config :

animated : boolean |Если true, Ionic включит все анимации и переходы в приложении.

@NgModule({
  // ...
  imports: [
    // ...
    IonicModule.forRoot({
      animated: false
    }),
  ],
  //...