html - 在动画启动画面后移动到下一页

Question

我是 ionic4/angular4 的新手。我在一个页面中创建了一个漂亮的动画启动画面，但是在启动画面动画在某个时间点结束后，我需要前进到另一个页面。我提供了我的配置详细信息，但我没有安装 cordova s​​plash 插件。我认为不需要。请通过提供代码片段来帮助我。我被困了两天。

export class HomePage {
splash= true;
  constructor() {}

  ionViewDidLoad() {
    setTimeout(() => 
    {
      this.splash = false;
    }, 4000);
  }

}

ion-content {
	--background: #FFBF00;
}

.tree {
	left: 0;
	right: 5%;
	margin: 0 auto;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	position: absolute;
}

.tree>div {
	position: absolute;
	height: 100%;
	width: 100%;
	background: #FFBF00;
	top: 0;
	left: 0;
	-webkit-animation-name: hello;
	-webkit-animation-duration: 5s;
	-webkit-animation-fill-mode: forwards;
	animation-name: hello;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}

@keyframes hello {
	0% {
		height: 100%;
	}
	100% {
		height: 0%;
	}
}

@-webkit-keyframes hello {
	0% {
		height: 100%;
	}
	100% {
		height: 0%;
	}
}

<ion-content>
<div class="tree" text-center [style.display]="splash ? 'block': 'none'">
    <div></div>
    <img src="assets/logo.svg">
  </div>

</ion-content>

配置文件

<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashScreenDelay" value="0" />
<preference name="ShowSplashScreen" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />

Answer 1

在 config.xml 文件下面添加一行

    <preference name="FadeSplashScreen" value="false"/>
  <preference name="AutoHideSplashScreen" value="false"/>

并使用 modalController 进行 splashScreen 显示，例如，

ionViewDidEnter() {

  this.splashScreen.hide();

  setTimeout(() => {
    this.modalCtrl.dismiss();
  }, 4000);

}