CSS3的transform属性：
语法格式：transform:none|'transform-function'
translate(x,y) 沿着x，y轴平移
transition:all 2s; //2s 时间
css代码：
position: absolute;width: 200px;height: 100%;background-color: yellow;right:0;transform: translate(100%,0);transition: all 2s;}
js代码：
import { Component, OnInit,ViewChild } from '@angular/core';@Component({selector: 'app-aside',templateUrl: './ponent.html',styleUrls: ['./ponent.css']})export class AsideComponent implements OnInit {constructor() { }asideFlag:boolean=true;//声明组件变量@ViewChild('aside') aside:any;ngOnInit(): void {}handleAside(){console.log('我被点了');if(this.asideFlag){//vewchild 操作domthis.aside.nativeElement.style.transform = 'translate(0,0)';this.asideFlag = false;}else{this.aside.nativeElement.style.transform = 'translate(100%,0)';this.asideFlag = true;}}}
html代码：
<div><button (click)='handleAside()'>点我</button></div><aside #aside>这是一个侧边栏</aside>
效果：
