Angular 使用DOM對象實現CSS3側邊欄動畫

首先我們使用Angular CLI創建一個組件【aside】, 創建命令如下：

ng generate component components/aside

接下來我們在創建好的組件【aside.component.html】編寫如下代碼：

<section>
    <h3>DOM操作CSS3頁面動畫</h3>
    <aside id="aside">
        我是側邊欄
    </aside>
    <button (click)="showAside()">展開</button> &nbsp;
    <button (click)="hideAside()">隱藏</button>
</section>

開始編寫樣式，分別在組件【aside.component.css】和 ng 框架全局樣式【styles.css】文件中編寫如下css：

//1.組件【aside.component.css】樣式
#aside{
    width: 200px;
    height: 100%;
    position: absolute; /* 絕對定位 */
    background-color: #000;
    color: #fff;
    right: 0px;
    top: 0px;
    transform: translate(100%,0); /*css3: 動畫，X軸100%隱藏，Y軸不變 */
    transition: all 1s; /* 動畫顯示過度1s */
}

//2.ng 框架全局樣式【styles.css】
body{
    width: 100%;
    overflow: hidden; /* 讓底部下邊框滾動條超出部分影藏 */
}

最後我們在組件【aside.component.ts】中編寫頁面按鈕【展開】和【影藏】的點擊事件：

//顯示
showAside():void{
  //原生js獲取dom節點
  var asideDom:any = document.getElementById('aside');
  asideDom.style.transform = 'translate(0,0)';
  //asideDom.style.setProperty('transform','translate(0,0)'); //等效代碼
}

//影藏
hideAside():void{
  //原生js獲取dom節點
  var asideDom:any = document.getElementById('aside');
  asideDom.style.transform = 'translate(100%,0)';
  //asideDom.style.setProperty('transform','translate(100%,0)'); //等效代碼
}

以上就完成一個簡單的側邊欄動畫效果（默認影藏），演示效果如下：