Angular中調用css3動畫實現側邊欄的顯示與隱藏

場景

Angular介紹、安裝Angular Cli、創建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目。

效果

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

新建一個組件translate

ng g component components/translate

然后在html中

<div class="content">

 

    內容區域
  
    <button (click)="showAside()">彈出側邊欄</button>
  
  
    <button (click)="hideAside()">隱藏側邊欄</button>
  
  </div>
  
  <aside id="aside">
  
  
    這是一個側邊欄
  </aside>

  

 

在scss中

 

#aside{


    width: 200px;
    height: 100%;
    position: absolute;
    right: 0px;
    top:0px;
    background: #000;
    color:#fff;
    transform: translate(100%,0);

    transition: all 2s;

}

 

在ts中

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-translate',
  templateUrl: './translate.component.html',
  styleUrls: ['./translate.component.scss']
})
export class TranslateComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  showAside(){

    //原生js獲取dom節點


    var asideDom:any=document.getElementById('aside');

    asideDom.style.transform="translate(0,0)";

 }

hideAside(){

   //原生js獲取dom節點

   var asideDom:any=document.getElementById('aside');

   asideDom.style.transform="translate(100%,0)";

}

}