背景：同样，本篇为根据学习视频的笔记记录，主要是angular实现的一个简单的侧边栏，并通过对dom的操作，实现侧边栏的动画隐藏显示的效果，很简单的一个示例。
看代码：在主项目中建立一个动画组件
ng g c transition
ponent.css
#aside{width: 200px;height: 100%;position: absolute;right: 0px;top: 0px;background: #000;color: #fff;transform: translate(100%,0);transition: all 2s;}
ponent.html
<div id="content">这里是内容区域<button (click)="showAside();">弹出侧边栏</button><button (click)="hiddenAside();">隐藏侧边栏</button></div><aside id="aside">侧边栏</aside>
ponent.ts
import { Component, OnInit } from '@angular/core';@Component({selector: 'app-transition',templateUrl: './ponent.html',styleUrls: ['./ponent.css']})export class TransitionComponent implements OnInit {constructor() { }ngOnInit() {}/*** 显示侧边栏*/showAside() {const asideEl: any = document.getElementById('aside');asideEl.style.transform = 'translate(0,0)';}/*** 隐藏侧边栏*/hiddenAside() {const asideEl: any = document.getElementById('aside');asideEl.style.transform = 'translate(100%,0)';}}
在ponent.html中引入组件
<app-transition></app-transition>
最后效果：
