路由器在 Ionic 上导航，并在 ios 上使用角度动画闪烁动画

我正在使用 @angular/animations 在 Ionic (v4) 上的两个页面之间设置页面转换，这一切在 chrome 上都很好用，但在 safari 上却不行。

在一个只有两个页面（热切加载）的简单应用程序上，我仍然遇到问题，与我尝试设置动画的属性无关。如果我创建一个空动画，闪烁只会消失，但这不是目标。另外，我正在使用急切加载。

动画.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'
}

第1页.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;
}

全局.scss

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

为了更好地说明问题，我以慢动作录制并上传到Giphy https://giphy.com/gifs/Zb6YrET2x2jaRy2bZm

我期望的结果与我在 Safari 上的 chrome 上得到的结果相同，即使用这种动画结构而不在页面之间闪烁

我会添加这个答案，因为评论有点长。正如我们在评论中讨论的，问题是因为您的动画与默认动画冲突iOS页面过渡动画 https://github.com/ionic-team/ionic/blob/master/core/src/utils/transition/ios.transition.ts

解决此问题的推荐方法是创建您自己的页面过渡动画如你看到的在这个答案中 https://stackoverflow.com/a/56183114/3915438。这样做将应用您的自定义动画覆盖所有默认的“动画”ion-nav and ion-router-outlet 贯穿整个应用程序.

如果由于某种原因你只想在每个页面上使用 Angular 动画 - 就像你在代码中使用类似的东西

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

您可以通过以下方式禁用 Ionic 的默认页面过渡动画配置 https://ionicframework.com/docs/utilities/config#config-options:

animated: 布尔值 |如果为 true，Ionic 将启用应用程序中的所有动画和过渡。

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