angular转场动画

0、参考自：Angular 页面初始化动画 - Zero_追梦 - 博客园 (cnblogs.com)

1、样式，在 assets/styles/ 目录下新建 loading.css 文件

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #059669;
    z-index: 9999;
    transition: opacity 0.65s;
}
.preloader-hidden {
    display: none;
}
.cs-loader {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.cs-loader-inner {
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
    width: 100%;
    color: #fff;
    text-align: center;
}
.cs-loader-inner label {
    font-size: 20px;
    opacity: 0;
    display: inline-block;
}
@keyframes lol {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }
    33% {
        opacity: 1;
        transform: translateX(0);
    }
    66% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(300px);
    }
}
.cs-loader-inner label:nth-child(6) {
    animation: lol 2.5s infinite ease-in-out;
}
.cs-loader-inner label:nth-child(5) {
    animation: lol 2.5s 0.1s infinite ease-in-out;
}
.cs-loader-inner label:nth-child(4) {
    animation: lol 2.5s 0.2s infinite ease-in-out;
}
.cs-loader-inner label:nth-child(3) {
    animation: lol 2.5s 0.3s infinite ease-in-out;
}
.cs-loader-inner label:nth-child(2) {
    animation: lol 3.5s 0.4s infinite ease-in-out;
}
.cs-loader-inner label:nth-child(1) {
    animation: lol 2.5s 0.5s infinite ease-in-out;
}

2、在 index.html 的 body 下添加如下代码

  <link href="assets/styles/loading.css" rel="stylesheet" type="text/css">
  <div class="preloader">
    <div class="cs-loader">
      <div class="cs-loader-inner">
        <label class="font-black text-6xl"> &#9752 </label>
        <label class="font-black text-6xl"> &#10052 </label>
        <label class="font-black text-6xl"> &#9752 </label>
        <label class="font-black text-6xl"> &#10052 </label>
        <label class="font-black text-6xl"> &#9752 </label>
        <label class="font-black text-6xl"> &#10052 </label>
        <label class="font-black text-6xl"> &#9752 </label>
      </div>
    </div>
  </div>

3、新建 splash-screen.service.ts 服务

import { Inject, Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { DOCUMENT } from '@angular/common';
import { filter, take } from 'rxjs/operators';
import { animate, AnimationBuilder, style } from '@angular/animations';

@Injectable({
    providedIn: 'root'
})
export class SplashScreenService {

    splashScreenElem: HTMLElement;

    constructor(private router: Router,
        @Inject(DOCUMENT) private document: Document,
        private animationBuilder: AnimationBuilder) {

        const ele = this.document.body.querySelector('.preloader');
        this.splashScreenElem = ele as HTMLElement;

        if (this.splashScreenElem) {
            this.router.events.pipe(
                filter(event => event instanceof NavigationEnd),
                take(1)
            ).subscribe(() => this.hide());
        }
    }

    hide() {
        // const player = this.animationBuilder.build([
        //     style({
        //         opacity: 1
        //     }),
        //     animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({
        //         opacity: 0
        //     }))
        // ]).create(this.splashScreenElem);

        // player.onDone(() => this.splashScreenElem.remove());
        // player.play();
        setTimeout(() => {
            if (this.splashScreenElem) {
                this.splashScreenElem.className = 'preloader-hidden';
            }
        }, 1500);
    }
}

5、最后将SplashScreenService 在 app.module.ts 声明，并在 app.component.ts 中注入

import { SplashScreenService } from 'src/@ice/services/splash-screen.service';

@NgModule({
   ...... 
  providers: [SplashScreenService,.......],
  ......
})

constructor(private splashScreenService: SplashScreenService) { }