大佬教程收集整理的这篇文章主要介绍了Angular 页面初始化动画,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
// 样式 <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; } }); } }
以上是大佬教程为你收集整理的Angular 页面初始化动画全部内容,希望文章能够帮你解决Angular 页面初始化动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。