Angular 使用DOM对象实现CSS3侧边栏动画

最新推荐文章于 2022-01-14 12:09:09 发布

原创最新推荐文章于 2022-01-14 12:09:09 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #css3 #transform #transition #angular

基于TypeScript的Angular6.X系列学习专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用Angular CLI创建带有CSS3动画效果的侧边栏组件。通过原生JS操作DOM实现侧边栏的展开与隐藏，配合CSS3的transform和transition属性，达到平滑的动画效果。

首先我们使用Angular CLI创建一个组件【aside】, 创建命令如下：

ng generate component components/aside

接下来我们在创建好的组件【aside.component.html】编写如下代码：

<section>
    <h3>DOM操作CSS3页面动画</h3>
    <aside id="aside">
        我是侧边栏
    </aside>
    <button (click)="showAside()">展开</button> &nbsp;
    <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)'); //等效代码
}

以上就完成一个简单的侧边栏动画效果（默认影藏），演示效果如下：