Angular学习笔记（六）-Angular操作dom实现侧边栏的显示与隐藏的动画效果

背景：同样，本篇为根据学习视频的笔记记录，主要是angular实现的一个简单的侧边栏，并通过对dom的操作，实现侧边栏的动画隐藏显示的效果，很简单的一个示例。

看代码：在主项目中建立一个动画组件

ng g c transition

transition.component.css

#aside{
  width: 200px;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  background: #000;
  color: #fff;

  transform: translate(100%,0);
  transition: all 2s;

}

transition.component.html

<div id="content">
  这里是内容区域
  <button (click)="showAside();">弹出侧边栏</button>
  <button (click)="hiddenAside();">隐藏侧边栏</button>
</div>

<aside id="aside">
  侧边栏
</aside>

transition.component.ts

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

@Component({
  selector: