<div class="content">
    内容区域
    <button (click)="showSide()">显示侧边栏</button>
    <button (click)="hideSide()">隐藏侧边栏</button>
</div>
<aside id="aside">
    这是一个侧边栏
</aside>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-transition',
  templateUrl: './transition.component.html',
  styleUrls: ['./transition.component.less']
})
export class TransitionComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  showSide(){
    //原生js获取dom节点
    var asideDom:any = document.getElementById('aside');
    asideDom.style.transform="translate(0,0)";
  }
  hideSide(){
    var asideDom:any = document.getElementById('aside');
    asideDom.style.transform="translate(100%,0)";
  }
}

#aside{
    width: 200px;
    height: 100%;
    position: absolute;
    right: 0px;
    background: #000;
    color: #fff;
    transform: translate(100%,0);//向右移动自身的100%
    transition: all 2s;
}