dom.html

<p>
  操作 dom / ViewChild / CSS3动画的执行
</p>


<app-head #head></app-head>

<div #box>
  box
</div>

<button (click)="showBox()">show</button>
<button (click)="hiddenBox()">hidden</button>

dom.component.ts

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

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


  @ViewChild('box') box:any;
  @ViewChild('head') head:any;
  constructor() { }

  ngOnInit() {
  }


  showBox(){
    let showBox:any = document.getElementById('head');
    showBox.style.transform = 'translate(0,0)';
  }
  hiddenBox(){
    let showBox:any = document.getElementById('head');
    showBox.style.transform = 'translate(100%,0)';
  }


}

head.html

<p id="head">
  head works!
</p>

#head{
    width: 300px;
    height: 100%;
    position:absolute;
    right: 0;
    top: 0;
    background-color: black;
    color: yellow;
    transform: translate(100% , 0);
    transition: all 0.5s
}