Angular 动画

1. 组件中元素动画应用:

显示隐藏元素动画, 需要将动画应用在需要动画的元素上；动画应用格式[@动画名]=“动画状态名称”

// 安装动画库

npm install @angular/animations --save

// 引入动画模块

@NgModule({
   imports: [
    BrowserModule,
BrowserAnimationsModule
  ]

// animation.component.html

<div class="animation_btn_group">

  <a href="javascript:;" (click)="inOut = 'block'">出场动画</a>

  <a href="javascript:;" (click)="inOut='none'">离场动画</a>

</div>

<div class="animation_content">

  <div class="animation_item" [@inoutAnimation]="inOut">Welcome !!!</div>

</div>



// animation.component.ts

@Component({

  selector: 'app-animation',

  templateUrl: './animation.component.html',

  animations: [

    trigger('inAnimation', [ // 基础动画

    state('block', style({ opacity: 1, transform: 'scale(.8, .8)'})),

    state('none', style({ opacity: 0, transform: 'scale(0.5, .1)'})),

    transition('none => block', animate('1s ease-in')),

    transition('block => none', animate('1s ease-out'))

]);

]

})

2. 切换路由动画应用:

路由切换时组件进场/ 出场动画；需要将动画应用在切换的组件的最外层元素上；

• routerLink(Directive) -链接到指定的路由;

• routerLinkActive(Directive) - 当此链接指向的路由激活时，往宿主元素上添加一个 CSS 类;

• router-outlet - 页面占位符，显示路由切换时需要渲染的组件；

// 安装动画库

npm install @angular/animations --save

// 引入动画模块

@NgModule({
   imports: [
    BrowserModule,
    BrowserAnimationsModule
  ]


// app.component.html

<p><a href="javascript:;" routerLink="/page1" routerLinkActive="active">组件1</a></p>
<p><a href="javascript:;" routerLink="/page2" routerLinkActive="active">组件2</a></p>


<router-outlet></router-outlet>



//page1.component.ts

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  animations: [

     trigger('inoutAnimation', [ // * 代表任何状态；void代表进场状态，一个元素尚未被挂载到视图；
        transition(':enter', [ // 进场、出场；帧动画
        animate(3000, keyframes([
        style({opacity: 0, transform: 'translateX(-100%)'}),
        style({opacity: 1, transform: 'translateX(40px)'}),
        style({opacity: 1, transform: 'translateX(0)'})
        ])),
    ]),
    transition(':leave', [
    animate(3000, keyframes([
    style({opacity: 1, transform: 'translateX(-0)'}),
    style({opacity: 0, transform: 'translateX(-15px)'}),
    style({opacity: 0, transform: 'translateX(-100%)'}),
        ]))
    ]) 

]
})

// page1.component.html

<div [@inoutAnimation]>
   page1页面
</div>



// page2同理

//page2.component.ts

@Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html',
  animations: [

     trigger('inoutAnimation', [ // * 代表任何状态；void代表进场状态，一个元素尚未被挂载到视图；
        transition(':enter', [ // 进场、出场；帧动画
        animate(3000, keyframes([
        style({opacity: 0, transform: 'translateX(-100%)'}),
        style({opacity: 1, transform: 'translateX(40px)'}),
        style({opacity: 1, transform: 'translateX(0)'})
        ])),
    ]),
    transition(':leave', [
    animate(3000, keyframes([
    style({opacity: 1, transform: 'translateX(-0)'}),
    style({opacity: 0, transform: 'translateX(-15px)'}),
    style({opacity: 0, transform: 'translateX(-100%)'}),
        ]))
    ]) 

]
})

// page2.component.html

<div [@inoutAnimation]>
   page1页面
</div>


// 路由app.routing.ts
const routes: Routes = [
  {path: 'page1', component:Page1Component, data: {title: '页面1'}},
  {path: 'page2', component:Page2Component, data: {title: '页面2'}}, 
];

3. 封装动画库

若有重复动画，需要封装动画库；或者我们需要代码简洁，低耦合时，可以封装动画库；

// 安装动画库

npm install @angular/animations --save

// 引入动画模块

@NgModule({
   imports: [
    BrowserModule,
    BrowserAnimationsModule
  ]


// 新建animate.ts动画库文件

import {animate, keyframes, state, style, transition, trigger} from '@angular/animations';

export const inAnimation = trigger('inAnimation', [ // 基础动画
  state('block', style({ opacity: 1, transform: 'scale(.8, .8)'})),
  state('none', style({ opacity: 0, transform: 'scale(0.5, .1)'})),
  transition('none => block', animate('1s ease-in')),
  transition('block => none', animate('1s ease-out'))
]);
export const inOutAnimation = trigger('inoutAnimation', [ // * 代表任何状态；void代表进场状态，一个元素尚未被挂载到视图；
  transition(':enter', [ // 进场、出场；帧动画
    animate(3000, keyframes([
      style({opacity: 0, transform: 'translateX(-100%)'}),
      style({opacity: 1, transform: 'translateX(40px)'}),
      style({opacity: 1, transform: 'translateX(0)'})
    ])),
  ]),
  transition(':leave', [
    animate(3000, keyframes([
      style({opacity: 1, transform: 'translateX(-0)'}),
      style({opacity: 0, transform: 'translateX(-15px)'}),
      style({opacity: 0, transform: 'translateX(-100%)'}),
    ]))
  ])
]);

上面两个动画我们可以修改为:

• 动画一(组件中元素动画应用)

// animation.component.ts

import {inAnimation, inOutAnimation} from './animation.ts';
@Component({
  selector: 'app-animation',
  templateUrl: './animation.component.html',
  animations: [inAnimation, inOutAnimation]

})

// animation.component.html不需要修改

• 动画二（切换路由动画应用）

// page1.component.ts

import {inAnimation, inOutAnimation} from './animation.ts';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  animations: [inAnimation, inOutAnimation]

})



// page2.component.ts

import {inAnimation, inOutAnimation} from './animation.ts';

@Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html',
  animations: [inAnimation, inOutAnimation]

})



// 别的文件不需要修改

动画方法介绍：

1. @angular/animations库里面的方法介绍：

• trigger: 创建一个有名字的动画触发器，包含一个 state() 和 transition() 的列表，当此触发器的绑定表达式发生变化时，它们就会重新求值。
• state: 在附加到元素的触发器上，声明一个动画状态及其此状态下的样式；
• transition: 声明一个转场动画，以便在满足给定条件时运行一系列动画步骤。
• keyframe: 可定义一组动画样式，每个样式都关联着一个可选的 offset 值(若未手动指定，则会自动计算偏移量).
• query: 在动画序列中正在播放的元素中查找一个或多个内部元素;
• group: 定义一个可以并行运行的动画步骤列表。
• sequence: 定义一个动画步骤列表，逐个依次运行它们.
• animate: 定义一个动画步骤，它把一些样式信息和时序信息组合在一起。第一个参数代表动画过程执行时间，第二个参数代表动画延迟执行时间, 第三个参数代表缓动效果。

2. 状态：

• void：一个元素尚未被挂载到视图; *代表：任何状态;
• void => * : 进场，也可以写成:enter , 是匹配任何动画状态， => *不会触发转场动画
• * => void : 离场,也可以写成:leave, void是代表元素还没附加到视图时候的特殊状态