首先我们使用Angular CLI创建一个组件【aside】, 创建命令如下:
ng generate component components/aside
接下来我们在创建好的组件【aside.component.html】编写如下代码:
<section>
<h3>DOM操作CSS3页面动画</h3>
<aside id="aside">
我是侧边栏
</aside>
<button (click)="showAside()">展开</button>
<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)'); //等效代码
}
以上就完成一个简单的侧边栏动画效果(默认影藏),演示效果如下: