window.setTimeout () = > {
document.getElementById("preLoading").style.zIndex="-1";
document.getElementById("preLoading__image").style.opacity="0";}, 2000);
wrote an effect of entering the home page to display the picture once. How to change it if the picture doesn"t disappear after the browser steps back?
<div class="preLoading" id="preLoading">
<img class="preLoading__image" id="preLoading__image"
src="/images/loading.png">
</div>.preLoading__image {
display:block;
width: 300px;
}
.preLoading {
opacity: 1;
z-index: 100;
transition: all .8s ease-in-out;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: -sharp000;
display:flex;
justify-content: center;
align-items: center;
}
.preLoading .preLoading__image {
animation: preLoadingAnimation 2s linear 0s 1;
}
@keyframes preLoadingAnimation {
50% {
opacity: 0.5;
}
50% {
opacity: 0.3;
}
}