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

Question

我正在使用 @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'
}

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

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

Answer 1

我会添加这个答案，因为评论有点长。正如我们在 cmets 中所讨论的，问题是因为您的动画与默认的 iOS page transition animation

冲突

解决此问题的推荐方法是创建您自己的页面过渡动画，如您所见in this answer。这样做会应用您的自定义动画，覆盖整个应用程序中所有ion-nav 和ion-router-outlet 的默认“动画”。

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

的东西

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

您可以通过 the Config 禁用 Ionic 的默认页面过渡动画：

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

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