Animations在html元素之间增加了很多交互,Angular 2可以使用动画,从Angular 4开始,动画不再是@angular/core库的一部分,而是一个单独的程序包,需要将其导入app.module.ts中。
首先,我们需要使用下面的代码行导入库-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
需要将 BrowserAnimationsModule 添加到 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 { }
在 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,有一个click事件,将为其调用animate函数,对于div,将添加@myanimation指令并将其值指定为state。
现在让我们看一下定义动画的 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导入了trigger,state,style,transition和animate。
现在,我们将把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标签的动画名称。第二个参数是我们导入的函数-状态(state),转换(transition)等。
状态函数涉及动画步骤,元素将在其中进行转换。现在,我们定义了两个状态,smaller和larger。对于smaller的状态,我们给出了 transform:translateY(100px)和 transform:translateY(100px)样式。
现在让我们看一下.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 文件中定义的动画名称。
单击按钮后,它将调用动画函数,该函数在 app.component.ts 文件中定义如下:
export class AppComponent { state: string="smaller"; animate() { this.state=this.state == ‘larger'? 'smaller' : 'larger'; } }
定义了状态变量,并给其默认值较小(smaller)。动画函数会更改点击状态。如果状态较大,它将转换为较小状态。如果较小,它将转换为较大的。
这就是浏览器(http://localhost:4200 /)中的输出看起来像-
单击 Click Me 按钮后,图像的位置将更改,如以下屏幕截图所示-
变换函数沿y方向应用,当我们单击"Click Me"按钮时,该函数从0变为100px。图像存储在 assets/images 文件夹中。
参考链接
https://www.learnfk.com/angular7/angular7-animations.html
标签:动画,smaller,app,无涯,Angular7,state,import,angular From: https://blog.51cto.com/u_14033984/8741246