Question

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

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

Answer 1

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

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

，并使用modalController进行飞溅屏幕显示，

ionViewDidEnter() {

  this.splashScreen.hide();

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

}

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

1 个答案: