(精华2020年6月7日更新)Angular基础篇 DOM的操作

TS文件

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

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

  flag: boolean = true;
  constructor() { }

  ngOnInit(): void {
    //组件和指令初始化完成， 但是不是真正的dom完成
    let Box = document.getElementById('DOM');
    console.log(Box.innerHTML)

    //获取不到
    // let Box2 = document.getElementById('DOM2');
    // console.log(Box2.innerHTML)

  }
  //生命周期处理Dom, 视图加载完成以后触发的方法
  ngAfterViewInit() {
    let Box2 = document.getElementById('DOM2');
    console.log(Box2.innerHTML)

  }
  //显示动画
  showAside() {

    var aside = document.getElementById('aside');
    aside.style.transform = 'translate(0,0)'
  }
  //隐藏动画
  hideAside() {
    var aside = document.getElementById('aside');
    aside.style.transform = 'translate(100%,0)'
  }
}

html文件

<div class="content">
    <div id="DOM">DOM测试</div>
    <div id="DOM2" *ngIf="flag">
        DOM测试2
    </div>
    <button (click)='showAside()'>弹出侧边栏</button>
    <button (click)='hideAside()'>隐藏侧边栏</button>
    <aside class="aside" id="aside">
        这个是一个侧边栏
    </aside>
</div>

less文件

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