Angular8 css3动画 侧边栏滑动

Angular8 css3动画 侧边栏滑动

实现了一个小demo,效果截图：

上代码：

html页面：

ts代码：

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() { } //出来动画 toShow(){ let str:any = document.getElementById("aside"); str.style.transform="translate(0,0)"; } //回去动画 toBack(){ let str:any = document.getElementById("aside"); str.style.transform="translate(100%,0)"; }}

最重要的css样式：

#aside{ width: 200px; height: 1100px; position: absolute; right: 0px; top: 0px; background: black; color: pink; transform: translate(100%,0); transition: all 1s;}

全局css样式：

body{ width: 100px; overflow: hidden;}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。