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')
    ])
])