动画元素运动中的状态样式如何变化？

Angular 动画中，状态表示的是要进行运动的元素在运动的不同时期所呈现的样式。在 Angular 中，有三种类型的状态，分别为：

• void ：void 状态表示元素在运动开始之前或结束之后的样式。通常用于元素出现或消失的动画。
• *** ** ：* 状态表示元素在运动期间的样式。通常用于元素移动或改变大小的动画。
• custom ：custom 状态允许您定义自己的状态和样式。您可以使用它来创建更复杂的动画效果。

要使用状态，您需要在动画触发器中定义它们。动画触发器是一个 Angular 指令，它告诉 Angular 在什么情况下应该应用动画。您可以使用 @state() 装饰器来定义状态。例如：

@Component({
  selector: 'my-app',
  template: '<div [@myAnimationTrigger]="state"></div>',
  animations: [
    trigger('myAnimationTrigger', [
      state('void', style({
        opacity: 0
      })),
      state('*', style({
        opacity: 1
      })),
      transition('void => *', animate('1s'))
    ])
  ]
})
export class AppComponent {
  state = 'void';

  toggleState() {
    this.state = this.state === 'void' ? '*' : 'void';
  }
}

在这个例子中，我们定义了一个叫做 myAnimationTrigger 的动画触发器。这个触发器有两个状态：void 和 *。void 状态定义了元素在运动开始之前或结束之后的样式，而 * 状态定义了元素在运动期间的样式。

我们还定义了一个叫做 toggleState() 的方法。这个方法切换元素的状态。当元素处于 void 状态时，它会变成 * 状态；当元素处于 * 状态时，它会变成 void 状态。

当您点击元素时，toggleState() 方法会被调用，元素的状态就会发生变化。由于我们定义了从 void 状态到 * 状态的过渡动画，所以元素在状态之间切换时会播放动画。

状态是创建 Angular 动画的强大工具。您可以使用它们来创建各种生动有趣的动画效果。