場景

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)";}}

?

總結

以上是生活随笔為你收集整理的Angular中调用css3动画实现侧边栏的显示与隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。