场景

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建组件以及组件之间的调用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通过以上搭建起Angular项目。

效果

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

新建一个组件translate

ng g component components/translate

然后在html中

<div class="content">内容区域<button (click)="showAside()">弹出侧边栏</button><button (click)="hideAside()">隐藏侧边栏</button></div><aside id="aside">这是一个侧边栏</aside>

在scss中

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

在ts中

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-translate',templateUrl: './translate.component.html',styleUrls: ['./translate.component.scss']
})
export class TranslateComponent implements OnInit {constructor() { }ngOnInit(): void {}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)";}}

Angular中调用css3动画实现侧边栏的显示与隐藏相关推荐

android popupwindow边框阴影,android PopupWindow 阴影背景、动画、点击显示、隐藏
阴影背景 bg_shadow_white.xml 入动画 pop_enter_anim.xml 出动画 pop_exit_anim.xml 动画样式点击显示.隐藏 final PopupWindo ...
html中span隐藏属性,Div和Span标签显示与隐藏
本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...
vue中根据后端接口数据控制按钮的显示与隐藏（手动添加响应式this.$set()）
项目涉及到的问题,按钮需要根据后端返回的参数情况,实现按钮的显示与隐藏. 效果如图: 1.查看后端接口 get请求,需要传businessId和compoCode两个参数,返回的data有数据就显示按 ...
VS2010中ActiveX插件Shockwave Flash Object的显示与隐藏
[背景]最近在使用Shockwave Flash Object插件播放swf视频时,需要对视频进行显示和隐藏的操作.但是缺遇到了问题,这里跟大家一起分享,希望我的方法能够解决大家类似的问题,并探讨问题 ...
程序中调用命令行命令，不显示那个黑黑的DOS窗口
From: http://hi.baidu.com/yanqiuge/item/5da466c3d3f18453ad00ef1d 在程序中使用命令行时,会有黑黑的DOS窗口,很不爽,在网上查了一下,写 ...
vue中的数字动画及数字逗号显示
需求:实现数字动画,并实现数字千位分隔符格式(8888,显示为8,888),数字从0-8888实现动画递增 utils/common.js /*** 数字过渡动画-目前版本-默认一秒之内完成过渡动画* ...
Vue - ElementUI中循环渲染表格，控制字段的显示与隐藏 v-if与v-for同时使用
在Vue中使用v-for循环一个数组/对象时,如果再使用v-if,那么会提示使用计算属性(能正常使用),因为Vue中是不提倡v-for与v-if同时使用的. 在我的项目中也遇到了问题不过翻看文档解决 ...
获取Angular中的AngularJS功能
介绍 ( Introduction ) If you have solid experience with AngularJS 1.x, you're well aware of the framew ...
18个强大的纯CSS3动画案例分享
编辑整理 | web前端开发在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣 ...

Angular中调用css3动画实现侧边栏的显示与隐藏

场景

效果

实现

Angular中调用css3动画实现侧边栏的显示与隐藏相关推荐

最新文章

热门文章