此文目的，方便自己记忆。
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,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;
}
}
