Angular8 css3动画 侧边栏滑动

实现了一个小demo,效果截图：

上代码：

html页面：

<div class="centen">内容<button (click)="toShow()">comeon！</button><br><button (click)="toBack()">go Banck！</button></div><aside id="aside">侧边栏</aside>

ts代码：

import { Component, OnInit} from '@angular/core';@Component({selector: 'app-transition',templateUrl: './ponent.html',styleUrls: ['./ponent.scss']})export class TransitionComponent implements OnInit {constructor() { }ngOnInit() {}//出来动画toShow(){let str:any = document.getElementById("aside");str.style.transform="translate(0,0)";}//回去动画 toBack(){let str:any = document.getElementById("aside");str.style.transform="translate(100%,0)";}}

最重要的css样式：

#aside{width: 200px;height: 1100px;position: absolute;right: 0px;top: 0px;background: black;color: pink;transform: translate(100%,0);transition: all 1s;}

全局css样式：

body{width: 100px;overflow: hidden;}