Image placeholder and fade in when load

Ionic Framework ionic-v3
1

Hi!

I have a image I’m loading from a url and a title from WP Rest.
What I want to achieve is.when I navigate to the page:

  1. Show a placeholder image
  2. Show a text on top of placeholder and image
  3. fade in the real image.

I’m almost there, but can’t get the URLimage to fade in (animate-in-secondary) and there is a problem with timing, text does not show up until URLImage is loaded.

Any suqqestions??

Thanks

My code so far:
HTML:

<div class="headerimage">
  <img class="headerimage" [src]="'photoURL'">
  <div *ngIf="items" class="selection" >
  <div class="headertext animate-in-primary"  [innerHTML]="items.title.rendered"></div>
    </div>
  </div>

CSS:


  .headerimage {
     height: 100vh; /* For 100% screen height */
     position: relative;
     background-image: url('../assets/images/placeholder.jpg');
}
.headertext {
   position: absolute;
    bottom: 25%;
   left: 0;

   width: 100%;
   font-size: 28px !important;
   color: white;
}

From https://www.joshmorony.com/using-the-web-animations-api-in-ionic-2/:



@-webkit-keyframes animateInPrimary {
  0% {
    -webkit-transform: translate3d(0,200%,0);
      opacity: 0;
  }

  100% {
    -webkit-transform: translate3d(0,0,0);
      opacity: 1;
  }
}

@-webkit-keyframes animateInSecondary{

  0% {
    opacity: 0;
  }


  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animate-in-primary {
    -webkit-animation: animateInPrimary;
    animation: animateInPrimary;
    -webkit-animation-duration: 750ms;
    animation-duraton: 750ms;
}

.animate-in-secondary {
    -webkit-animation: animateInSecondary ease-in 1;
    animation: animateInSecondary ease-in 1;
    -webkit-animation-duration: 750ms;
    animation-duraton: 750ms;
}
3

This is what I was looking for exactly too. How did you go with this in the end?