实现了一个小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: './ponent.html',styleUrls: ['./ponent.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;}