I’m trying to create Splash screen for Ionic2 app by this example
in config.xml
file I’ve added "SplashScreenDelay"
and "ShowSplashScreen"
:
...
<preference name="SplashScreen" value="screen" />
<!--> <preference name="SplashScreenDelay" value="3000" /> -->
<preference name="SplashScreenDelay" value="0"/>
<preference name="ShowSplashScreen" value="false"/>
in home.ts
:
ionViewDidLoad(){
setTimeout(() => this.splash = false, 4000);
}
in home.html with logo.png located in project directory assets/logo.png
:
<div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
<div class="flb">
<div class="Aligner-item Aligner-item--top"></div>
<img src="assets/logo.png">
<div class="Aligner-item Aligner-item--bottom"></div>
</div>
</div>
<ion-header>
<ion-navbar>
<ion-title>Home Page</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
...
in home.css
also with CSS3
powered animation code from Bounce.js
:
#custom-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100000;
width:100%;
background-color: #002a3e;
}
.flb {
background-color: #ea4e4e;
height:100%;
width:100%;
animation: pulse 1s linear forwards;
display: flex;
align-items: center;
justify-content: center;
}
.Aligner-item {
max-width: 50%;
}
.Aligner-item--top {
align-self: flex-start;
}
.Aligner-item--bottom {
align-self: flex-end;
}
#custom-overlay img {
display: block;
margin: 0 auto;
width: 50%;
height: auto;
animation: animation 3100ms linear infinite both;
animation-delay: 1s;
}
/// Here CSS3 powered animation code
...
Splash screen loads background color with transparency fade:
@keyframes pulse {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
but in this project $ionic start pro1
flash screen does not loads logo.png
over the Splash screen background color, same code with tabs layout project $ionic start pro2 tabs
, works properly, loads image and animation.
Not sure what is wrong here, advice would be helpful