Fading in the Angular Router Outlet | Task

Ole Ersoy
Jan - 03  -  1 min

Scenario

We wish to fade in the Angular Router outlet.

Approach

Within styles.css or styles.scss add.

router-outlet + * {
  display: block;
  animation: outlet 1s;
}

@keyframes outlet {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Demo