Angular学习笔记（六）-Angular操作dom实现侧边栏的显示与隐藏的动画效果

╰半夏微凉° 2023-02-21 04:56 2阅读 0赞

背景：同样，本篇为根据学习视频的笔记记录，主要是angular实现的一个简单的侧边栏，并通过对dom的操作，实现侧边栏的动画隐藏显示的效果，很简单的一个示例。

看代码：在主项目中建立一个动画组件

ng g c transition

transition.component.css

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

transition.component.html

<div id="content">
      这里是内容区域
      <button (click)="showAside();">弹出侧边栏</button>
      <button (click)="hiddenAside();">隐藏侧边栏</button>
    </div>
    
    <aside id="aside">
      侧边栏
    </aside>

transition.component.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() {
        const asideEl: any = document.getElementById('aside');
        asideEl.style.transform = 'translate(0,0)';
      }
    
      /**
       *  隐藏侧边栏
       */
      hiddenAside() {
        const asideEl: any = document.getElementById('aside');
        asideEl.style.transform = 'translate(100%,0)';
      }
    
    }

在app.component.html中引入组件

<app-transition></app-transition>

最后效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200628173447603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200628173512827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5ajEwODMxNw==,size_16,color_FFFFFF,t_70