在组件html中
<div>
<aside id="aside">侧边栏</aside>
<div class="content">
<p><button (click)="showaside()">弹出侧边框</button></p>
<p><button (click)="hiddenaside()">隐藏侧边框</button></p>
<p> <button (click)="toggleaside()" id="togglebtn">显示与隐藏</button></p>
</div>
</div>
css中:
#aside{width: 200px; height: 100%;position: absolute; right: 0;top: 0; background-color: #000 ; color:#fff;transform: translate(100%,0);transition: all 2s}
ts 中
showaside(){
var asideDom:any = document.getElementById("aside");
asideDom.style.transform="translate(0%,0)";
}
hiddenaside(){
var asideDom:any = document.getElementById("aside");
asideDom.style.transform="translate(100%,0)";
}