Angular 执行 css3 简单的动画

<div class="content">



  内容区域

  <button (click)="showAside()">弹出侧边栏</button>


  <button (click)="hideAside()">隐藏侧边栏</button>

</div>

<aside id="aside">


  这是一个侧边栏
</aside>

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

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

  constructor() { }

  ngOnInit() {



  }

  showAside(){

     //原生js获取dom节点


     var asideDom:any=document.getElementById('aside');

     asideDom.style.transform="translate(0,0)";

  }

 hideAside(){

    //原生js获取dom节点

    var asideDom:any=document.getElementById('aside');

    asideDom.style.transform="translate(100%,0)";

 }


}

效果：

转载于:https://www.cnblogs.com/loaderman/p/10898524.html