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

会不了一点

已于 2023-03-17 23:49:06 修改

阅读量109

点赞数 3

分类专栏： ygggy 文章标签： css3 前端 angular typescript css

于 2023-03-17 23:46:31 首次发布

本文链接：https://blog.csdn.net/qq_41954181/article/details/129630464

版权

ygggy 专栏收录该内容

48 篇文章

订阅专栏

文章展示了如何在Angular应用中创建一个新闻组件，该组件包含一个内容区域和两个按钮，用于控制侧边栏的显示与隐藏。通过typescript的@ViewChild装饰器获取DOM元素，并应用CSS变换进行平滑的动画效果，实现侧边栏从右侧滑入和滑出的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装组件过程略。

new.component.html

<div class="content">
  内容区域
  <button (click)="showAside()">弹出侧边栏</button>
  <button (click)="hideAside()">隐藏侧边栏</button>
</div>

<aside #aside id="aside">这是一个侧边栏</aside>

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