实现了一个小demo,效果截图:
上代码:
html页面:
<div class="centen">
内容
<button (click)="toShow()">comeon!</button>
<br>
<button (click)="toBack()">go Banck!</button>
</div>
<aside id="aside">
侧边栏
</aside>
ts代码:
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-transition',
templateUrl: './transition.component.html',
styleUrls: ['./transition.component.scss']
})
export class TransitionComponent implements OnInit {
constructor() { }
ngOnInit() {
}
//出来动画
toShow(){
let str:any = document.getElementById("aside");
str.style.transform="translate(0,0)";
}
//回去动画
toBack(){
let str:any = document.getElementById("aside");
str.style.transform="translate(100%,0)";
}
}
最重要的css样式:
#aside{
width: 200px;
height: 1100px;
position: absolute;
right: 0px;
top: 0px;
background: black;
color: pink;
transform: translate(100%,0);
transition: all 1s;
}
全局css样式:
body{
width: 100px;
overflow: hidden;
}