Angular--操作CSS3，定义侧边栏动画

1. 新建一个组件

打开命令行，进入Angualr项目输入：

ng g component components/transition

---

2. 定义组件结构

transition.component.html

<div class="content">
    <div>
        <button (click)="showAside()">弹出侧边栏</button>
    </div>
    <div>
        <button (click)="hideAside()">隐藏侧边栏</button>
    </div>
</div>
<aside id="aside">
    这是一个侧边栏
</aside>

---

3. 定义组件样式

transition.comcssponent.css

#aside {
    
    
  width: 200px;
  height: 100%;
  text-align: center;
  font-size: 700;
  position: absolute;
  right: 0px;
  top: 0px;
  background: orange;
  color: #fff;
  transform: translate(100%, 0);
  transition: all 2s;
}
button {
    
    
  width: 200px;
  height: 40px;
  color: navy;
  line-height: 40px;
  font-weight: 700;
  margin-left: 40%;
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: skyBlue;
  margin-top: 10px;
}

style.css

/* You can add global styles to this file, and also import other style files */
body {
    
    
  width: 100%;
  overflow-x: hidden;
}

---

4. 定义组件数据

transition.comcssponent.ts

import {
    
     Component, OnInit } from '@angular/core';

@Component({
    
    
  selector: 'app-transition',
  templateUrl: './transition.component.html',
  styleUrls: ['./transition.component.css'],
})
export class TransitionComponent implements OnInit {
    
    
  constructor() {
    
    }

  ngOnInit() {
    
    }

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

---

5. 引入组件

app.component.html

<app-transition></app-transition>

---

6. 运行程序

命令行输入：

ng serve --open

运行结果：

---