动画启动画面后移至下一页 [英] moving to next page after animated splash screen

问题描述

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

 导出类主页{splash = true;Constructor(){}ionViewDidLoad(){setTimeout(()=>{this.splash = false;}，4000)；}}  

  ion-content {--background:#FFBF00;}.树 {左:0；正确:5％；保证金:0自动;最高:50％；转换:translateY(-50％);宽度:100％;位置:绝对；}.tree> div {位置:绝对；高度:100％;宽度:100％;背景:#FFBF00;最高:0;左:0；-webkit-animation-name:您好；-webkit-animation-duration:5秒；-webkit-animation-fill-mode:转发；animation-name:您好；动画时间:5秒；animation-fill-mode:前进；}@keyframes你好{0％{高度:100％;}100％{高度:0％；}}@ -webkit-keyframes你好{0％{高度:100％;}100％{高度:0％；}}  

 < ion-content>< div class ="tree"文本中心[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"/> 

解决方案

在您的 config.xml 文件

下面添加

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

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

  ionViewDidEnter(){this.splashScreen.hide();setTimeout(()=> {this.modalCtrl.dismiss();}，4000)；} 

i am new to ionic4/angular4. i have created a nice animated splash screen in a page but after the splash screen animation is over at some point of time i need to move forward to another page.i have provided my config details and i didn't installed cordova splash plugin.i thought it is not needed.please help me by providing code snippets.i am stuck for two days.

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

解决方案

add below line your config.xml file

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

and use modalController for splashScreen show like,

ionViewDidEnter() {

  this.splashScreen.hide();

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

}

这篇关于动画启动画面后移至下一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！