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

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

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

Answer 1

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

冲突

解决此问题的推荐方法是创建您自己的页面过渡动画，如您所见 .这样做会应用您的自定义动画，覆盖整个应用程序 .

中所有 ion-nav 和 ion-router-outlet 的默认 "animation"
如果出于某种原因您只想在每个页面上使用 Angular 动画 - 就像您在代码中使用
之类的东西一样
<ion-content [@fadeIn]='anim'> ... </ion-content>

您可以通过 the Config:
禁用 Ionic 的默认页面转换动画

animated: boolean | If true, Ionic will enable all animations and transitions across the app.

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

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

Router navigate on Ionic with animation blinking on ios using angular animations

angular

ionic4