首先我们使用AngularCLI创建一个组件【aside】,创建命令如下：
ng generate component components/aside
接下来我们在创建好的组件【ponent.html】编写如下代码：
<section><h3>DOM操作CSS3页面动画</h3><aside id="aside">我是侧边栏</aside><button (click)="showAside()">展开</button> <button (click)="hideAside()">隐藏</button></section>
开始编写样式，分别在组件【ponent.css】和 ng 框架全局样式【styles.css】文件中编写如下css：
//1.组件【ponent.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; /* 让底部下边框滚动条超出部分影藏 */}
最后我们在组件【ponent.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)'); //等效代码}
以上就完成一个简单的侧边栏动画效果（默认影藏），演示效果如下：
