Angular---@ViewChild实现dom操作，调用CSS3动画

安装组件过程略。

new.component.html

<div class="content">
  内容区域
  <button (click)="showAside()">弹出侧边栏</button>
  <button (click)="hideAside()">隐藏侧边栏</button>
</div>

<aside #aside id="aside">这是一个侧边栏</aside>

new.component.ts

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

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss'],
})
export class NewsComponent {
  @ViewChild('aside') myAside: any;
  showAside() {
    this.myAside.nativeElement.style.transform = 'translate(0,0)';
  }
  hideAside() {
    this.myAside.nativeElement.style.transform = 'translate(100%,0)';
    // translate( tx, ty ) tx:此参数保存对应于x轴的平移长度 ty:此参数保存对应于y轴的平移长度
    // 正数为往右和下
  }
}

news.component.scss

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

style.scss

body {
  width: 100%;
  overflow-x: hidden;
}