Question

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

CSS文件

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

HTML文件

<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";
  }
}

check link

Answer 1

在如下所示的endState（）方法中将其this.currentState = "state2"设置为export class AnimationExampleComponent implements OnInit { currentState = "state1"; constructor() { } ngOnInit() { } endState() { this.currentState = "state2"; } }，然后您的状态就会发生变化，并且由于您仅在state2中应用了样式，因此您应该能够看到一些变化。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

import { AppComponent } from './app.component';

const config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  storageBucket: "",
  messagingSenderId: ""
};

@NgModule({
  imports:      [ 
    BrowserModule,
    AngularFireModule.initializeApp(config),
    AngularFireDatabaseModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

1 个答案: