广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

本篇文章带大家深入了解一下angular中的状态和动画，简单介绍一下创建动画的方法，并聊聊关键帧动画、动画回调、可重用动画、交错动画等知识点，希望对大家有所帮助！

1、什么是状态

状态表示的是要进行运动的元素在运动的不同时期所呈现的样式。

2、状态的种类

在 Angular 中，有三种类型的状态，分别为：void、*、customvoid：当元素在内存中创建好但尚未被添加到 DOM 中或将元素从 DOM 中删除时会发生此状态 【相关教程推荐：《angular教程》】

*：元素被插入到 DOM 树之后的状态，或者是已经在DOM树中的元素的状态，也叫默认状态

custom：自定义状态，元素默认就在页面之中，从一个状态运动到另一个状态，比如面板的折叠和展开。

3、进出场动画

进场动画是指元素被创建后以动画的形式出现在用户面前，进场动画的状态用 void => * 表示，别名为 :enter

出场动画是指元素在被删除前执行的一段告别动画，出场动画的状态用 * => void，别名为 :leave

1、在使用动画功能之前，需要引入动画模块，即 BrowserAnimationsModule

import { BrowserAnimationsModule } from "@angular/platform-browser/animations"@NgModule({  imports: [BrowserAnimationsModule],})export class AppModule {}

2、默认代码解析，todo 之删除任务和添加任务

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />

<div class="container">  <h2>Todos</h2>  <div class="form-group">    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />  </div>  <ul class="list-group">    <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">      {{ item }}    </li>  </ul></div>

import { Component } from "@angular/core"@Component({  selector: "app-root",  templateUrl: "./app.component.html",  styles: []})export class AppComponent {  // todo 列表  todos: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]// 添加 todo  addItem(input: HTMLInputElement) {    this.todos.push(input.value)    input.value = ""  }// 删除 todo  removeItem(index: number) {    this.todos.splice(index, 1)  }}

3、创建动画

trigger 方法用于创建动画，指定动画名称

transition 方法用于指定动画的运动状态，出场动画或者入场动画，或者自定义状态动画。

style 方法用于设置元素在不同的状态下所对应的样式

animate 方法用于设置运动参数，比如动画运动时间，延迟事件，运动形式

@Component({  animations: [    // 创建动画, 动画名称为 slide    trigger("slide", [      // 指定入场动画 注意: 字符串两边不能有空格, 箭头两边可以有也可以没有空格      // void => * 可以替换为 :enter      transition("void => *", [        // 指定元素未入场前的样式        style({ opacity: 0, transform: "translateY(40px)" }),        // 指定元素入场后的样式及运动参数        animate(250, style({ opacity: 1, transform: "translateY(0)" }))      ]),      // 指定出场动画      // * => void 可以替换为 :leave      transition("* => void", [        // 指定元素出场后的样式和运动参数        animate(600, style({ opacity: 0, transform: "translateX(100%)" }))      ])    ])  ]})

注意：入场动画中可以不指定元素的默认状态，Angular 会将 void 状态清空作为默认状态

trigger("slide", [  transition(":enter", [    style({ opacity: 0, transform: "translateY(40px)" }),    animate(250)  ]),  transition(":leave", [ animate(600, style({ opacity: 0, transform: "translateX(100%)" }))  ])])

注意：要设置动画的运动参数，需要将 animate 方法的一个参数更改为字符串类型

// 动画执行总时间 延迟时间 (可选) 运动形式 (可选)animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" }))

关键帧动画使用 keyframes 方法定义

transition(":leave", [  animate(    600,    keyframes([      style({ offset: 0.3, transform: "translateX(-80px)" }),      style({ offset: 1, transform: "translateX(100%)" })    ])  )])

Angular 提供了和动画相关的两个回调函数，分别为动画开始执行时和动画执行完成后

<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>

import { AnimationEvent } from "@angular/animations"start(event: AnimationEvent) {  console.log(event)}done(event: AnimationEvent) {  console.log(event)}

1、将动画的定义放置在单独的文件中，方便多组件调用。

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />0

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />1

2、抽取具体的动画定义，方便多动画调用。

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />2

3、调用动画时传递运动总时间，延迟时间，运动形式

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />3

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />4

Angular 中提供了 query 方法查找元素并为元素创建动画

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />5

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />6

默认情况下，父级动画和子级动画按照顺序执行，先执行父级动画，再执行子级动画，可以使用 group 方法让其并行

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />7

Angular 提供了 stagger 方法，在多个元素同时执行同一个动画时，让每个元素动画的执行依次延迟。

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />8

注意：stagger 方法只能在 query 方法内部使用

Angular 提供了 state 方法用于定义状态。

1、默认代码解析

<!-- 在 index.html 文件中引入 bootstrap.min.css --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />9

<div class="container">  <h2>Todos</h2>  <div class="form-group">    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />  </div>  <ul class="list-group">    <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">      {{ item }}    </li>  </ul></div>0

2、创建动画

<div class="container">  <h2>Todos</h2>  <div class="form-group">    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />  </div>  <ul class="list-group">    <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">      {{ item }}    </li>  </ul></div>1

<div class="container">  <h2>Todos</h2>  <div class="form-group">    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />  </div>  <ul class="list-group">    <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">      {{ item }}    </li>  </ul></div>2

1、为路由添加状态标识，此标识即为路由执行动画时的自定义状态

<div class="container">  <h2>Todos</h2>  <div class="form-group">    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />  </div>  <ul class="list-group">    <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">      {{ item }}    </li>  </ul></div>3

2、通过路由插座对象获取路由状态标识，并将标识传递给动画的调用者，让动画执行当前要执行的状态是什么

<div class="container">  <h2>Todos</h2>  <div class="form-group">    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />  </div>  <ul class="list-group">    <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">      {{ item }}    </li>  </ul></div>4

<div class="container">  <h2>Todos</h2>  <div class="form-group">    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />  </div>  <ul class="list-group">    <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">      {{ item }}    </li>  </ul></div>5

3、将 routerContainer 设置为相对定位，将它的直接一级子元素设置成绝对定位

<div class="container">  <h2>Todos</h2>  <div class="form-group">    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />  </div>  <ul class="list-group">    <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">      {{ item }}    </li>  </ul></div>6

4、创建动画

<div class="container">  <h2>Todos</h2>  <div class="form-group">    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />  </div>  <ul class="list-group">    <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">      {{ item }}    </li>  </ul></div>7

更多编程相关知识，请访问：编程视频！！

以上就是angular学习之深入聊聊状态和动画的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~