此处，我们用到了名为animations的属性。该属性的输入是一个阵列，此阵列包含一个或多个“触发器”。同时，每个触发器都带有唯一的名称、和用来定义动画的状态和各种转换的具体实现。
另外，每一个状态函数都会通过“stateName”来唯一地识别其状态、并用样式函数来显示在该状态下的元素样式。
当然，每个转换函数也都通过stateChangeExpression，来定义元素状态转换、并定义动画的不同步骤所对应的阵列，从而能够显示出转换是如何发生的。在此，我们就可以用逗号分隔的数值，来将多个触发器函数包括到动画的属性之中。
由于这些功能(触发、状态、和转换)都被定义在@angular/animations模块之中，因此，我们需要在自己的组件导入该模块。
为了将动画应用到某个元素之上，我们需要在元素的定义中包含触发器的名称，即：在元素的标签里使用@后面加触发器名称的格式。对应的代码示例如下：
<div @changeSize></div>
这是将触发器changeSize应用到元素的上。
下面，让我们创建更多的动画，以更好地理解Angular的动画概念吧。
更改大小的动画
我们将创建一个动画，来实现一键改变的大小。
请打开animationdemo.component.ts文件，将如下代码添加到导入定义之中。
import { trigger, state, style, animate, transition } from '@angular/animations';
在组件的元数据中添加如下的动画属性定义。
animations: [ trigger('changeDivSize', [ state('initial', style({ backgroundColor: 'green', width: '100px', height: '100px' })), state('final', style({ backgroundColor: 'red', width: '200px', height: '200px' })), transition('initial=>final', animate('1500ms')), transition('final=>initial', animate('1000ms')) ]), ]
在此，我们定义了一个触发器—changeDivSize，而且该触发器里的两个功能函数。该元素在“初始”状态时呈现绿色，并随着宽度和高度的增加，在“最终”状态时呈现为红色。
同时，我们定义了状态的转换规则：从“初始”态到“最终”态将持续1500毫秒，而从“最终”态返回“初始”态则为1000毫秒。
为了改变元素的状态，我们在组件的类定义中定义了一个功能函数。我们将如下代码包含在AnimationdemoComponent类中：
currentState = 'initial'; changeState() { this.currentState = this.currentState === 'initial' ? 'final' : 'initial'; }
此处，我们定义了一个changeState方法，来切换元素的状态。
请打开animationdemo.component.html文件，并添加以下代码：
<h3>Change the div size</h3> <button (click)="changeState()">Change Size</button> <br /> <div [@changeDivSize]=currentState></div> <br />
我们定义了一个按钮，来调用点击时的changeState函数。由于我们前面已经定义了元素，并对它应用了changeDivSize动画触发器，因此当按钮被点击时，它会更新元素的状态，其大小则会伴随着转换效果而发生变化。
在执行该应用之前，我们也需要将引用包含在app.component.html文件内的Animationdemo组件中。
打开app.component.html文件，您会发现该文件中已包含了一些默认的HTML代码。请删除所有的代码，并按照下图所示放置组件的选择器：
<app-animationdemo></app-animationdemo>
请在Visual Studio Code的终端窗口里运行ng serve命令，以执行该代码。运行完毕后，它会提示您在浏览器中打开:4200。随后，您就会在浏览器中看到如下点击按钮的动画效果。
气球动画效果
在前面的动画示例中，转化仅发生在两个方向。而在本节中，我们将学习如何改变所有方向上的尺寸。这与气球的充、放气比较类似，故称为气球动画效果。
请在动画属性中添加如下的触发器定义。
trigger('balloonEffect', [ state('initial', style({ backgroundColor: 'green', transform: 'scale(1)' })), state('final', style({ backgroundColor: 'red', transform: 'scale(1.5)' })), transition('final=>initial', animate('1000ms')), transition('initial=>final', animate('1500ms')) ]),
在此，我们使用转换属性来更改所有方向的尺寸大小。当该元素的状态发生变化时转换随即发生。
请在app.component.html文件中添加如下HTML代码。
<h3>Balloon Effect</h3> <div (click)="changeState()" [@balloonEffect]=currentState> </div>
在此，我们定义了一个div，并通过CSS样式来定义成一个圆圈。我们将通过点击div去调用changeState，从而实现元素状态的切换。
下图便是该动画在浏览器中的运行效果：
淡入和淡出动画