Angular 如何将动画添加到角度项目

我现在正在学习angular，我尝试在angular网站上的示例中为基础项目添加一些动画。这里有一些代码示例，我不知道应该在app.component.ts文件中的

//动画触发器转到此处

下键入什么。我曾尝试添加动画：

[trigger（'openClose'）]

但它没有任何改变。示例来自角度场地： 提前非常感谢您的回答

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [trigger('openClose')]
})
export class AppComponent {
  title = 'My-Site';
}

其余的代码与站点底部的链接相同（代码审查部分包含open-close.component.ts、html和css文件）

您可以使用

由于您是it初学者，我建议您浏览这个演示，并对其进行一些挖掘，并观察输出。你最终会明白的

角度动画的另一个工作示例，用于解释可以在角度动画中应用动画的不同场景：-

---

不，这个例子不是来自angular网站，阅读整个页面，您将对它的工作原理有一些基本的了解

在

animations:[]

中，您正在定义状态、触发器、动画等。但在HTML中，您需要定义在何处使用它们

因此，如果在

animations:[]

animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],

您可以在HTML中将其用作：

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

盒子现在是{{isOpen？'Open'：'Closed'}

其中

isOpen

将是一些变量，它将触发

Open

和

Close

状态