1. Angular–操作CSS3，定义侧边栏动画

1. 1 新建一个组件

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

ng g component components/transition

1.2 定义组件结构

ponent.html

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

1.3 定义组件样式

cssponent.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;}

1.4. 定义组件数据

cssponent.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() {//原生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)';}}

1.5 引入组件

ponent.html

<app-transition></app-transition>

1. 6 运行程序

命令行输入：

ng serve --open

运行结果：