CODEWITHSUNDEEP
htmlcssangularionic-framework
Prem Kumar
Prem Kumar

Reputation: 23

moving to next page after animated splash screen

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

Upvotes: 0

Views: 460

Answers (1)

MohammedAli
MohammedAli

Reputation: 2519

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);

}

Upvotes: 1

Related Questions