Angular---@ViewChild实现dom操作，调用CSS3动画

安装组件过程略。

new.component.html

内容区域弹出侧边栏隐藏侧边栏

new.component.ts

import { Component, ViewChild } from '@angular/core';@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.scss'],
})
export class NewsComponent {@ViewChild('aside') myAside: any;showAside() {this.myAside.nativeElement.style.transform = 'translate(0,0)';}hideAside() {this.myAside.nativeElement.style.transform = 'translate(100%,0)';// translate( tx, ty ) tx:此参数保存对应于x轴的平移长度 ty:此参数保存对应于y轴的平移长度// 正数为往右和下}
}

news.component.scss

#aside {width: 200px;height: 100%;position: absolute;right: 0px;top: 0px;background: black;color: #fff;transform: translate(100%, 0);transition: all 2s;
}

style.scss

body {width: 100%;overflow-x: hidden;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！