angular动画的应用

此文目的，方便自己记忆。

1.在app.module.ts中引入动画模块和功能

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

@NgModule({
  imports: [ BrowserModule,BrowserAnimationsModule ],// ... more stuff ...
})
export class AppModule { }

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

<div class='button' (click)='hidelistPanel(false)'>显示列表</div>
<div class="parasBlock" [@listState]='isHideList'>
  <div class='back' (click)='hidelistPanel(true)'>返回</div>
  <div>列表div</div>
</div>

import { Component,OnInit } from '@angular/core';
import { trigger,transition } from '@angular/animations';
@Component({
animations: [
        trigger('listState',[
            state('true',style({ display: 'none' })),state('false',style({ display: 'block' })),transition('true => false',[style({ transform: 'translateX(100%)' }),animate(200)]),transition('false => true',[animate('200ms 0ms',style({ transform: 'translateX(100%)' }))])
        ])
    ]
})
export class Name implements OnInit{
isHideList = true;
hidelistPanel(states) {
        this.isHideList = states;
    }
}