如果我在动画的完成事件中更改状态名称，则不应用状态

Question

我需要在动画完成事件触发时更新我的状态，但我的代码不起作用，但是如果我添加一些延迟，那么工作正常。我不理解这种行为。请帮帮我？

CSS 文件

.myblock {
background-color: green;
width: 300px;
height: 250px;
border-radius: 5px;
margin: 5rem;
}

网页文件

<div [@changeState]="currentState" (@changeState.done)="endState()" class="myblock mx-auto" ></div>
<button (click)="changeState()">Change state</button>

TS 文件

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { interval } from 'rxjs';

@Component({
selector: 'app-animation-example',
templateUrl: './animation-example.component.html',
styleUrls: ['./animation-example.component.scss'],
animations: [
trigger('changeState', [
state('state1', style({
})),
state('state2', style({
backgroundColor: 'red',
transform: 'scale(1.5)'
})),
transition('state2=>state1', animate('300ms')),
transition('state1=>state2', animate('2000ms'))
])
]
})
export class AnimationExampleComponent implements OnInit {
currentState = "state1";
constructor() { }
ngOnInit() {
}
/* button click listener */
changeState() {
this.currentState = "state2";
}
endState() {
this.currentState = "state1";
}
}

检查链接

Answer 1

让它像下面这样在endState((方法中this.currentState = "state2"，那么你的状态就会改变，因为你只在state2中应用了样式，你应该能够看到一些变化。

export class AnimationExampleComponent implements OnInit {
currentState = "state1";
constructor() { }
ngOnInit() {
}
endState() {
this.currentState = "state2";
}
}