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

Angular8 css3动画 侧边栏滑动_html页面

 

Angular8 css3动画 侧边栏滑动_ide_02

上代码：

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: './transition.component.html',
  styleUrls: ['./transition.component.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;
}