Angular7 动画
动画在 html 元素之间添加了很多交互。 Angular 2 提供了动画，从 Angular 4 开始，动画不再是 @angular/core 库的一部分，而是一个单独的包，需要在 app.module.ts 中导入。
首先，我们需要使用以下代码行导入库：
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
The 浏览器动画模块 需要添加到导入数组中 app.module.ts 如下所示：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ScrollDispatchModule,
DragDropModule,
ReactiveFormsModule,
BrowserAnimationsModule
],
providers: [MyserviceService],
bootstrap: [AppComponent]
})
export class AppModule { }
In app.component.html ，我们添加了要进行动画处理的 html 元素。
<div> <button (click) = "animate()">Click Me</button> <div [@myanimation] = "state" class = "rotate"> <img src = "assets/images/img.png" width = "100" height = "100"> </div> </div>
对于主 div，我们添加了一个按钮和一个带有图像的 div。有一个调用 animate 函数的点击事件。对于 div，添加了 @myanimation 指令并将其值作为状态。
现在让我们看看 app.component.ts 定义动画的地方。
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
styles:[`
div {
margin: 0 auto;
text-align: center;
width:200px;
}
.rotate {
width:100px;
height:100px;
border:solid 1px red;
}
`],
animations: [
trigger('myanimation',[
state('smaller',style({
transform : 'translateY(100px)'
})),
state('larger',style({
transform : 'translateY(0px)'
})),
transition('smaller <=> larger',animate('300ms ease-in'))
])
]
})
export class AppComponent {
state: string = "smaller";
animate() {
this.state= this.state == 'larger' ? 'smaller' : 'larger';
}
}
我们必须导入要在 .ts 文件中使用的动画功能，如上所示。
import { trigger, state, style, transition, animate } from '@angular/animations';
在这里，我们从@angular/animations 导入了触发器、状态、样式、过渡和动画。
现在，我们将动画属性添加到@Component() 装饰器中：
animations: [
trigger('myanimation',[
state('smaller',style({
transform : 'translateY(100px)' })),
state('larger',style({
transform : 'translateY(0px)' })),
transition('smaller <=> larger',animate('300ms ease-in'))
])
]
触发器定义动画的开始。它的第一个参数是要赋予需要应用动画的 html 标记的动画名称。第二个参数是我们导入的函数——状态、转换等。
状态函数涉及元素将在其间转换的动画步骤。现在我们已经定义了两个状态，更小和更大。对于较小的状态，我们给出了样式 变换：translateY(100px) and 变换：translateY(100px) .
过渡函数将动画添加到 html 元素。第一个参数接受开始和结束状态，第二个参数接受 animate 函数。 animate 函数允许你定义过渡的长度、延迟和缓和度。
现在让我们看看 .html 文件，看看转换函数是如何工作的：
<div> <button (click) = "animate()">Click Me</button> <div [@myanimation] = "state" class = "rotate"> <img src = "assets/images/img.png" width = "100" height = "100"> </div> </div>
@component 指令中添加了一个样式属性，它集中对齐 div。让我们考虑下面的例子来理解相同的：
styles:[`
div{
margin: 0 auto;
text-align: center;
width:200px;
}
.rotate{
width:100px;
height:100px;
border:solid 1px red;
}
`],
在这里，特殊字符 [``] 用于向 html 元素添加样式(如果有)。对于 div，我们给出了定义在 app.component.ts file.
单击按钮时，它会调用 animate 函数，该函数在 app.component.ts 文件如下：
export class AppComponent {
state: string = "smaller";
animate() {
this.state = this.state == ‘larger’? 'smaller' : 'larger';
}
}
状态变量已定义并被赋予较小的默认值。 animate 函数在单击时更改状态。如果状态较大，它将转换为较小；如果更小，它将转换为更大。
浏览器中的输出是这样的 (http://localhost:4200/) 看起来像：
点击后 Click Me 按钮，图像的位置发生改变，如下图所示：
变换函数应用于 y 方向，当我们单击 Click Me 按钮时，它从 0 变为 100px。图像存储在 资产/图像 folder.