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