Angular 页面初始化动画
发布时间:2020-12-17 07:03:06 所属栏目:安全 来源:网络整理
导读:用于进入组件前的加载动画 第一步: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
用于进入组件前的加载动画第一步: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; } }); } } 加载效果预览(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |