Angular 页面初始化动画

用于进入组件前的加载动画

---

第一步：index.html 定义动画模板和样式

// 样式

<style type="text/css">.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #49a9ee;
    z-index: 9999;
    transition: opacity .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 .1s infinite ease-in-out
  }
  .cs-loader-inner label:nth-child(4) {
    animation: lol 2.5s .2s infinite ease-in-out
  }
  .cs-loader-inner label:nth-child(3) {
    animation: lol 2.5s .3s infinite ease-in-out
  }
  .cs-loader-inner label:nth-child(2) {
    animation: lol 3.5s .4s infinite ease-in-out
  }
  .cs-loader-inner label:nth-child(1) {
    animation: lol 2.5s .5s infinite ease-in-out
  }

</style>

// 加载中DOM

<div class="preloader">
    <div class="cs-loader">
      <div class="cs-loader-inner">
        <label> O </label>
        <label> R </label>
        <label> A </label>
        <label> N </label>
        <label> C </label>
        <label> L </label>
        <label> E </label>
      </div>
    </div>
  </div>

第二步：路由守卫，在进入路由满足条件时取消加载

• 请求登陆认证接口，已登录 - 取消加载，进入路由；未登录 - 跳转至登录页，无需取消加载

export class GuardService implements CanActivate {
  // 获取加载元素
  loadElem = document.querySelector('.preloader');

  constructor(private _http: HttpClient) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    // 构造参数
    const encodeTrans = encodeURIComponent('http://192.155.1.32:4200/');
    const params = new HttpParams().set('callback', encodeTrans);
    // 登陆认证
    return this._http.get('http://113.23.11.2:3120/isLogin', {params, withCredentials: true})
      .map((data: any) => {
        if ( data.errcode === 2001) { // 未登录 - 重定向至登陆页面
          window.location.href = data.msg;
          return false;
        } else if ( data.errcode === 2000) { // 登录成功 - 取消加载，进入路由
// 取消加载
          const _loadThis = this;
          setTimeout(function() {
            if (_loadThis.loadElem) {
              _loadThis.loadElem.className = 'preloader-hidden';
            }
          }, 100);

          // 进入当前路由
          return true;
        }
    });
  }
}

加载效果预览