billrobbins

<?php echo get_the_post_thumbnail( get_option( 'page_for_posts' ) ); ?>

billrobbins

<?php echo apply_filters( 'the_content', get_post_field( 'post_content', get_option( 'page_for_posts' ) ) ); ?>

billrobbins

<div class="site-content page" *ngIf="page" [@readyAnimation]="loadingImage">

billrobbins

<img class="background-image" [src]=page.featured_image_url (load)="displayImage()" />

billrobbins

  this.router.events.subscribe((evt) => {
      if (evt instanceof NavigationStart) {
          this.loadingImage = false;
      }
    });

billrobbins

@HostBinding( 'class.loaded-image' ) loadingImage: boolean = false;
  
  displayImage() {
    setTimeout(() => {
      this.loadingImage = true;
    }, 1);
  }

billrobbins

import { trigger, animate, transition, style, query } from '@angular/animations';

export const readyAnimation =

    trigger('readyAnimation', [

        transition('* => *', [
            style({ opacity: 0 }),
            animate(500, style({ opacity: 1 }))
          ])

billrobbins

  ngOnInit() {

    this.router.events.subscribe((evt) => {
      if (evt instanceof NavigationStart) {
        this.pageAnimationFinished = false;
      }
    });

  }

billrobbins

  public getRouterOutletState(outlet) {
    return outlet.isActivated ? outlet.activatedRoute : '';
  }

  @HostBinding( 'class.page-transitioned' ) pageAnimationFinished: boolean = false;
  
  pageTransitioned() {
    this.pageAnimationFinished = true;
  }

billrobbins

  <div 
    class="router-wrap" 
    [@fadeAnimation]="getRouterOutletState(o)"
    (@fadeAnimation.done)="pageTransitioned()"
  >
    <router-outlet #o="outlet"></router-outlet>
  </div>