Angular中使用@ViewChild操作DOM实现CSS3动画效果

首先，使用命令ng generate component my-transition创建一个my-transition的组件，创建完成后，开始编写代码：

• my-transition.component.html代码部分：
  这部分主要是建立一个布局结构

<div class="container">
    内容区域
    <button *ngIf="isShow" (click)="showSlider()">打开侧边栏</button>
    <button *ngIf="!isShow" (click)="hiddenSlider()">关闭侧边栏</button>
</div>
<div #slider class="slider">
    <ul>
        <li>首页</li>
        <li>机构管理</li>
        <li>部门管理</li>
        <li>权限管理</li>
        <li>个人中心</li>
    </ul>
</div>

• my-transition.component.less代码部分：
  右侧菜单栏使用position脱离文档流，使用translate去控制右侧菜单栏的移动。

.slider {
    position: absolute;
    width: 200px;
    height: 100vh;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    transform: translate(0,0);
    transition: all 2s;
    ul {
        width: 100%;
        padding: 0;
    }
    ul li {
        display: block;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: rgba(255,255,255,.8);
        border-bottom: 1px solid #e5e5e5;
    }
}

注意，同时需要修改下全局的CSS样式文件内容：
让整个文档流平铺在可视区内，不展示横向滚动条。

image.png

• my-transition.component.ts代码部分：
  这部分就是单纯的去获取DOM元素然后去操作的，可以将按钮分成两个提出来写，也可以使用switch去合并在一个按钮中去写。都能实现相应的效果。

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

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

  public isShow: boolean = false; //控制右侧侧边栏

  @ViewChild('slider') slider: any; //获取DOM元素

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {


  }

  showSlider() {
    this.isShow = !this.isShow;
    this.slider.nativeElement.style.transform = "translate(0,0)"
  }
  hiddenSlider(){
    this.isShow = !this.isShow;
    this.slider.nativeElement.style.transform = "translate(200px,0)"
  }
}

image.png

image.png