1. 首页
  2. Angular
  3. Angular 笔记 动画01

Angular 笔记 动画01

Angular 官网教程

1 Angular 动画

1.1 动画

用于提供运动的幻觉
HTML 元素随着时间改变样式。
精心设计的动画可以让你的应用更有趣，更易用，但它们不仅仅是装饰性的。
动画可以改善你的应用和用户体验：

  • 没有动画，Web 页面的转场就会显得突兀、不协调。
  • 运动能极大地提升用户体验，因此动画可以让用户察觉到应用对他们的操作做出了响应。
  • 良好的动画可以直观的把用户的注意力吸引到要留意的地方。

典型的动画会涉及多种随时间变化的转换。
HTML 元素

  • 可以移动、
  • 变换颜色、
  • 增加或缩小、
  • 隐藏或从页面中滑出。
    这些变化可以同时发生或顺序发生。你可以控制每次转换的持续时间。

1.2 使用

Angular 主要的动画模块是 @angular/animations 和 @angular/platform-browser。
当你使用 CLI 创建新项目时，这些依赖会自动添加到你的项目中。

步骤

  • 步骤一：启用动画模块
  • 步骤二：把动画功能导入组件文件中
  • 步骤三：添加动画的元数据属性
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  declarations: [ ],
  bootstrap: [ ]
})
export class AppModule { }
import { Component, HostBinding } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  // ...
} from '@angular/animations';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [
    // animation triggers go here
  ]
})