ng执行css3动画

在组件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)";

　　}

---

转载于:https://www.cnblogs.com/rockyjs/p/11282599.html