问题描述
我的Angular视图中有5个HTML元素，我试图分别对其进行动画处理。这些动画是由首先进行动画处理的徽标（4x动画步骤）和随后溶解的覆盖层组成。
我引用了这篇文章开始我的工作，但最后我得到了一个空白页Medium Post - Creating Complex Animation Sequences with Angular
我的HTML，SCSS和TS文件：
import {Component,OnInit} from '@angular/core';
import {
trigger,transition,style,animate,state,stagger,query,keyframes,group
} from '@angular/animations';
@Component({
selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.scss'],animations: [
trigger('loadingAnimations',[
transition(':enter',[
query('.shape3',[
// style({
// 'animation-duration': '0.3s',// 'animation-timing-function': 'cubic-bezier(0,.6,.5,1)',// 'animation-name': 'shape3',// }),stagger(-30,[
group([
animate('0.5s cubic-bezier(0,style({top: '4.5rem',opacity: 0,offset: 0})
),animate('0.5s cubic-bezier(0,offset: 0.40})
),style({opacity: 0.84,offset: 0.75})
),style({top: '2rem',offset: 1})
)
]),]),transition('*=>void',[
query('.shape2',// 'animation-name': 'shape2',style({left: '-2.5rem',offset: 0.20})
),style({left: 0,offset: 1})
)
])
]),[
query('.shape1',// 'animation-name': 'shape1',style({left: '3rem',top: '-1.25rem',style({left: '2rem',top: 0,opacity: 1,[
query('.polarix-logo-animation',// 'animation-name': 'master-turn',style({transform: 'rotate(-45deg)',offset: 0.60})
),style({transform: 'rotate(0deg)',offset: 1})
),])
]),// 'animation-name': 'loading-dissolve',style({opacity: 0,display: 'none',style({opacity: 0.40,style({opacity: 0.75,style({opacity: 1,])
]
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}@import '../../../sass/main';
main.login {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
top: 0;
left: 0;
position: relative;
display: grid;
grid-template-columns: 34.8125rem 1fr;
.loading-overlay {
position: absolute;
width: 100vw;
height: 100vh;
background: $white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 40;
visibility: visible !important;
.polarix-logo-animation {
height: 6rem;
width: 6rem;
display: block;
position: absolute;
right: calc(50% - 3rem);
top: calc(50% - 3rem);
animation-name: master-turn;
animation-duration: 0.8s;
animation-timing-function: cubic-bezier(0,1);
visibility: visible !important;
animation-delay: 1s;
.shape1 {
height: 4rem;
width: 4rem;
background-color: #E6E9F6;
border-radius: 0 2rem 2rem 0;
position: absolute;
left: 2rem;
//animation-duration: 0.4s;
//animation-timing-function: cubic-bezier(0,1);
//animation-name: shape1;
//animation-delay: 1s;
}
.shape2 {
height: 2rem;
width: 4rem;
background-color: #2036B8;
opacity: 0.84;
position: absolute;
top: 2rem;
//animation-duration: 0.4s;
//animation-timing-function: cubic-bezier(0,1);
//animation-name: shape2;
//animation-delay: 1s;
}
.shape3 {
height: 4rem;
width: 2rem;
background-color: #2036B8;
opacity: 0.84;
position: absolute;
left: 2rem;
top: 2rem;
animation: shape3 cubic-bezier(0,1) 0.4s;
//animation-duration: 0.4s;
//animation-timing-function: cubic-bezier(0,1);
//animation-name: shape3;
//animation-delay:1s;
}
}
}
.login-panel-left {
position: relative;
background: $white;
width: 100vw;
z-index: 30;
header.logo {
width: calc(100% - 3.9375rem);
padding-left: 3.9375rem;
border-bottom: 1px solid #EBEBEB;
.logo-container {
svg {
width: 147px;
}
}
}
section.login-form {
width: calc(100% - 14.75rem);
height: auto;
margin: 5.5625rem 7.375rem 3.625rem 7.375rem;
form.form {
padding-top: 1.5rem;
}
.login-controls {
@include clearFix();
height: 1rem;
display: grid;
margin-top: 1rem;
align-content: center;
grid-auto-flow: column;
grid-column-gap: 0;
grid-template-columns: 0 50% 50% 0;
align-items: center;
.login-remember-me {
position: relative;
top: 12px;
}
.login-forgot-password {
text-align: right;
position: relative;
top: -0.25rem;
}
}
.sign-up-cta {
margin-top: 7.1875rem;
}
}
}
.login-carousel-right {
width: calc(100vw - 34.8125rem);
background:
linear-gradient(180deg,rgba(85,121,228,0.0001) 0%,#2A44C5 100%),url(../../../assets/img/LoginCarouselBackground.svg) center center no-repeat;
background-size: cover;
position: relative;
z-index: 20;
}
}
//@keyframes master-turn {
// 0% {transform: rotate(-45deg);}
// 60% {transform: rotate(-45deg);}
// 100% {transform: rotate(0deg);}
//}
//@keyframes shape1 {
// 0% {left: 3rem; top: -1.25rem; opacity: 0;}
// 100% {left: 2rem; top: 0; opacity: 1;}
//}
//@keyframes shape2 {
// 0% {left: -2.5rem; opacity: 0;}
// 20% {left: -2.5rem;}
// 75% {opacity: 0.84;}
// 100% {left: 0;}
//}
//@keyframes shape3 {
// 0% {top: 4.5rem; opacity: 0;}
// 40% {top: 4.5rem;}
// 75% {opacity: 0.84;}
// 100% {top: 2rem;}
//}
//@keyframes loading-dissolve {
// 100% { opacity: 1; }
// 40% { opacity: 0.4; }
// 75% { opacity: 0.75; }
// 0% { opacity: 0; display: none;}
//}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main class="login" @loadingAnimations>
<div class="loading-overlay">
<div class="polarix-logo-animation">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="shape3"></div>
</div>
</div>
<div class="login-panel-left">
<header class="logo">
<div class="logo-container">
<svg width="307" height="95" viewBox="0 0 307 95" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M62.68 0.000183105H30.858V63.6452H62.68C80.255 63.6452 94.503 49.3982 94.503 31.8232V31.8222C94.503 14.2472 80.255 0.000183105 62.68 0.000183105Z" fill="#E6E9F6"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="307" height="95">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 94.7521H306.73V0.00012207H0V94.7521Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path opacity="0.847214" fill-rule="evenodd" clip-rule="evenodd" d="M0.000976562 63.5711H62.363V32.3901H0.000976562V63.5711Z" fill="#2036B8"/>
<path opacity="0.847214" fill-rule="evenodd" clip-rule="evenodd" d="M31.181 94.7521H62.363V32.3901H31.181V94.7521Z" fill="#2036B8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M125.959 56.8103C120.778 56.8103 116.809 52.7063 116.809 47.3903C116.809 42.0753 120.778 37.9693 125.959 37.9693C131.141 37.9693 135.245 42.0753 135.245 47.3903C135.245 52.7063 131.141 56.8103 125.959 56.8103ZM126.498 31.0393C121.788 31.0393 118.76 33.3273 116.875 35.3453L113.377 31.7793H107.455V38.2383H110.215V75.5833H117.414V60.0393C118.76 61.3853 121.788 63.7403 126.498 63.7403C135.447 63.7403 142.513 56.2723 142.513 47.3903C142.513 38.4403 135.447 31.0393 126.498 31.0393Z" fill="#231538"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M161.248 56.8103C156.067 56.8103 152.231 52.4363 152.231 47.3903C152.231 42.3433 156 38.0373 161.248 38.0373C166.43 38.0373 170.197 42.3433 170.197 47.3903C170.197 52.4363 166.362 56.8103 161.248 56.8103ZM161.248 31.1063C152.366 31.1063 144.897 38.1713 144.897 47.3903C144.897 56.6083 152.366 63.7403 161.248 63.7403C170.062 63.7403 177.531 56.6083 177.531 47.3903C177.531 38.1713 170.062 31.1063 161.248 31.1063Z" fill="#231538"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M187.622 18.4602H182.643L180.288 20.8822V59.9052L183.316 63.0012H190.381V56.0022H187.622V18.4602Z" fill="#231538"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M206.26 57.6853C201.685 57.6853 200.002 55.3303 200.002 53.2443C200.002 51.6283 201.012 49.2743 205.587 49.2743H213.661C213.661 52.9083 212.046 57.6853 206.26 57.6853ZM220.39 40.8633C220.39 33.9993 213.931 31.0393 207.539 31.0393C201.887 31.0393 197.244 32.9913 195.292 37.6333L201.349 40.3923C202.425 38.2383 204.78 37.2973 207.135 37.2973C210.163 37.2973 213.325 38.9123 213.325 41.7383V43.5543H206.193C194.889 43.5543 193.207 49.6103 193.207 53.2443C193.207 59.5693 198.186 63.7403 206.26 63.7403C210.297 63.7403 213.191 61.9913 214.806 60.1073L217.698 63.0003H223.081V56.0023H220.39V40.8633Z" fill="#231538"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M233.508 35.2112L230.077 31.7792H224.29V38.2382H227.049V63.0012H234.247V43.7562C234.247 40.8632 237.074 38.7772 240.034 38.7772C240.775 38.7772 241.582 38.9122 242.322 39.1802L244.408 31.6452C243.332 31.3092 242.256 31.1732 241.314 31.1732C237.882 31.1732 235.056 32.9912 233.508 35.2112Z" fill="#231538"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M247.266 31.7795V38.2385H249.958V63.0005H257.157V34.3365L254.6 31.7795H247.266Z" fill="#231538"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M282.523 31.7795L275.592 41.5355L268.596 31.7795H260.185L271.354 47.3905L260.185 63.0005H268.596L275.592 53.3115L282.523 63.0005H290.934L279.765 47.3905L290.934 31.7795H282.523Z" fill="#231538"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M301.416 36.8083C299.124 36.8083 297.264 34.9483 297.264 32.6563C297.264 30.3633 299.124 28.5033 301.416 28.5033C303.708 28.5033 305.568 30.3633 305.568 32.6563C305.568 34.9483 303.708 36.8083 301.416 36.8083ZM301.416 27.3423C298.484 27.3423 296.103 29.7233 296.103 32.6563C296.103 35.5883 298.484 37.9693 301.416 37.9693C304.348 37.9693 306.729 35.5883 306.729 32.6563C306.729 29.7233 304.348 27.3423 301.416 27.3423Z" fill="#231538"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M301.803 32.5071H300.449V30.8701H301.803C302.339 30.8701 302.755 31.1971 302.755 31.6881C302.755 32.1791 302.339 32.5071 301.803 32.5071ZM303.917 31.7331C303.917 30.7961 303.352 29.7541 301.64 29.7541H299.288V35.7071H300.449V33.6531H301.877L302.816 35.7071H303.917V35.3351L302.979 33.3851C303.649 33.0281 303.917 32.3731 303.917 31.7331Z" fill="#231538"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M250.211 26.3241H257.342V18.4881H250.211V26.3241Z" fill="#231538"/>
</g>
</svg>
</div>
</header>
<section class="login-form">
<h2 class="text-primary">Hello.</h2>
<h2>Let's get you<br/>signed in.</h2>
<form class="form" method="post">
<app-centrui-input [label]="'Email'" [inputType]="'text'" [inputPlaceHolder]="'joe.bloggs@acompanyname.com'"></app-centrui-input>
<app-centrui-input [label]="'Password'" [inputType]="'password'" [inputPlaceHolder]="'Your password'"></app-centrui-input>
<app-centrui-button [style]="'primary'" [size]="'large'" [type]="'submit'" [text]="'Sign In'" [ngStyle]="{'width': '100%','margin-top': '1.5rem'}"></app-centrui-button>
</form>
<div class="login-controls">
<div class="login-remember-me">
<app-centrui-input [label]="'Remember me'" [inputName]="'userRemember'" [inputType]="'checkBox'" [isSmall]="'small'"></app-centrui-input>
</div>
<div class="login-forgot-password">
<a href="javascript:void();" class="extra-small-text-extra-bold text-primary">Forgotten password?</a>
</div>
</div>
<div class="sign-up-cta">
<div class="small-text-extra-bold">Don't have an account? <a href="javascript:void()" class="text-primary">Sign up here</a></div>
</div>
</section>
</div>
<div class="login-carousel-right">
</div>
</main>正如我提到的，我最终得到的是空白页和控制台错误：
如果有人可以帮助我解决这个问题，因为我正在构建的该应用程序需要大量的Parallel＆Staggered动画，而我似乎已经跌倒了！
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）