@angular/cli项目构建--animations

使用方法一（文件形式定义）：

animations.ts

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';

// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
  trigger('routeAnimation', [
    state('*',
      style({
        opacity: 1,
        transform: 'translateX(0)'
      })
    ),
    transition(':enter', [
      style({
        opacity: 0,
        transform: 'translateX(-100%)'
      }),
      animate('0.2s ease-in')
    ]),
    transition(':leave', [
      animate('0.5s ease-out', style({
        opacity: 0,
        transform: 'translateY(100%)'
      }))
    ])
  ]);

在component中使用：

import { Component, HostBinding } from '@angular/core';
import { Router }                 from '@angular/router';

import { slideInDownAnimation }   from './animations';

@Component({
  templateUrl: './compose-message.component.html',
  styles: [ ':host { position: relative; bottom: 10%; }' ],
  animations: [ slideInDownAnimation ]
})
export class ComposeMessageComponent {
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display')   display = 'block';
  @HostBinding('style.position')  position = 'absolute';

}

使用方法二（直接使用）：

 

import {
  Component,
  Input
} from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';
 
import { Hero } from './hero.service';
 
@Component({
  selector: 'app-hero-list-basic',
  template: `
    <ul>
      <li *ngFor="let hero of heroes"
          [@heroState]="hero.state"
          (click)="hero.toggleState()">
        {{hero.name}}
      </li>
    </ul>
  `,
  styleUrls: ['./hero-list.component.css'],
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]
})
export class HeroListBasicComponent {
   @Input() heroes: Hero[];
}

 

toggleState() {
    this.state = this.state === 'active' ? 'inactive' : 'active';
  }

 

 

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
// Component transition animationsexport const slideInDownAnimation: AnimationEntryMetadata =  trigger('routeAnimation', [    state('*',      style({        opacity: 1,        transform: 'translateX(0)'      })    ),    transition(':enter', [      style({        opacity: 0,        transform: 'translateX(-100%)'      }),      animate('0.2s ease-in')    ]),    transition(':leave', [      animate('0.5s ease-out', style({        opacity: 0,        transform: 'translateY(100%)'      }))    ])  ]);