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 { }

2.在需要动画的页面ts中引入如下

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

3.页面html,实现点击button，右侧滑出parasBlock,点击back按钮，关闭parasBlock

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

4.对应的ts文件

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, 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;
    }
}