首先，使用命令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
