angularanimation

一 依赖

1.app 模块里面导入动画模块 — 在整个应用开启动画功能

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

imports: [BrowserAnimationsModule]

2.animations.ts 里面用到的函数

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

3. 组件里面导入触发器

import {t} from '../../animations'

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html',
  styleUrls: ['./hero-list.component.css'],
  animations:[t]
})

一 最简单的例子

1. 从一个状态变成另一个状态

export const t=trigger('t0',[
  state('open',style({width:'50px'})),
    state('close',style({width:'100px'})),
    transition('open<=>close',[animate('1s')
    ])
])