Angular进阶之八： Angular Animation在项目中的实践经验

KenkoTech

于 2024-03-19 16:29:29 发布

阅读量1.1k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： angular

本文链接：https://blog.youkuaiyun.com/KenkoTech/article/details/136844895

使用 Angular 进行项目开发的程序员应该都很熟悉 Angular Animation。这是一个 Angular 原生的动画库，它可以替代或者辅助完成原本需要使用 css 的动画功能。

Angular 在国内的运用是很有限的，可借鉴的文档并不很丰富。尤其对于 Angular 动画模块的应用类文档更是少见。我认为原因可能是大家普遍认为动画应当是由 css 去实现的，毕竟它有非常完善并且兼容性极强的动画功能。而且作为前端工程师，精通 css 是基本功，使用 css 完成页面的动画功能成本低、效率高。

既然如此那又为什么需要 Angular Animation 呢？我在实际的项目中体会到，相比 css 动画，Angular Animation 最大的优点是能够提供一系列很准确的关键帧回调函数(callback)。

下面是我模仿项目中的功能写的一个例子。我会罗列出所遇到的问题，并且逐一阐述我的解决方案。

代码环境：

javascript

{
  "name": "blog-angular-animation",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.1.0",
    "@angular/common": "^17.1.0",
    "@angular/compiler": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/forms": "^17.1.0",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/router": "^17.1.0",
    "lodash": "^4.17.21",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.1.0",
    "@angular/cli": "^17.1.0",
    "@angular/compiler-cli": "^17.1.0",
    "@types/jasmine": "~5.1.0",
    "@types/lodash": "^4.14.202",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.3.2"
  }
}

Demo 效果如下所示，这是一个简单的列表元素添加删除功能：

点击 Add 会在列表末尾添加一个元素
点击 Delete 会从列表中删除当前元素，并且调整后续元素的序号

Animation Demo

现在我们为这两个行为添加一些动画。下面是对动画过程的详细描述：

1. add

添加节点动画分为3个步骤

1.高度从0变为标准节点高度

2.宽度从1%增加到100%

3.渐入式显示内部元素

这三个步骤可以使用一个transition来完成，请看下面的代码：

typescript

trigger('addNode', [
    transition(':enter', [
        style({ height: '0px', width: '1%' }),
        query('.list-item-index', [style({ opacity: 0 })], { optional: true }),
        query('.list-item-value', [style({ opacity: 0 })], { optional: true }),
        query('.list-item-btn', [style({ opacity: 0 })], { optional: true }),
        group([
            style({ height: '0px', width: '1%' }),
            animate('0.2s ease-in-out', style({ height: '50px' }))
        ]),
        group([
            style({ width: '1%' }),
            animate('0.2s 0.1s ease-in-out', style({ width: '100%' }))
        ]),
        group([
            query('.list-item-index', [