动画启动画面后移至下一页答案

【问题标题】：moving to next page after animated splash screen动画启动画面后移至下一页
【发布时间】：2019-11-22 01:17:41
【问题描述】：

我是 ionic4/angular4 的新手。我在页面中创建了一个不错的动画启动屏幕，但是在启动屏幕动画在某个时间点结束后，我需要前进到另一个页面。我提供了我的配置详细信息，但我没有安装科尔多瓦启动插件。我认为不需要。请通过提供代码 sn-ps 来帮助我。我被困了两天。

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>

config.xml

<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" />

【问题讨论】：

这实际上取决于您在应用程序中的导航方式 - 无论启动画面如何。你用路由器吗？然后你可以把它放在你的超时时间里：this.router.navigateByUrl('/nextpage').
使用角度 Router 进行导航。
在一定时间后我需要切换。如何实现这一目标

标签： html css angular ionic-framework

【解决方案1】：

在下面添加您的config.xml 文件

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

并使用modalController 进行启动画面显示，

ionViewDidEnter() {

  this.splashScreen.hide();

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

}

【讨论】：