<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)"; } }

效果:

Angular 执行 css3 简单的动画的更多相关文章

  1. css3 简单界面动画

    asdasdasdasda asdasdasdasda

  2. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  3. 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  4. IT兄弟连 HTML5教程 CSS3属性特效 动画-animation

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...

  5. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  6. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

  7. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

  8. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  9. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

随机推荐

  1. Windows Server 2008搭建单域环境

    前言 一个典型的单域环境由主机,DC(Domain Controller域控制器).DNS服务器组成.DNS.DC都可以有多个,以实现负载均衡和容错 域中的计算机通过DNS解析域控制器,然后向域控制器 ...

  2. 数组中的reduce

    reduce方法第一次对我的感觉是很鸡肋,但是深入了解,才发现其中的奥妙,是个非常强大且实用的方法 var arr = [1,2,3,4,5,6,7]; var sum = arr.reduce( ( ...

  3. 用Xcode配置完美ACMer环境

    用Xcode配置完美ACMer环境 前言 ​ 作为\(ACMer\),需求大致为强大的文本编辑功能\((VIM)\),便捷的文件模版功能以及多文件编译功能.\(vscode\)虽然强大,但是与集成\( ...

  4. ajax二进制流乱码图片解决方法

    仅供自己参考 参考博客 在请求成功的地方 添加以下代码: var blob=new Blob(); blob=this.response; 既然二进制数据拿到了,那么要把它放在一个 html标签中,并 ...

  5. PHP启动php-fpm成功,但php-cgi进程查找不到 502 getaway

    一般情况大家刚把lnmp环境安装好之后,把nginx中 fastcgi_pass unix:/tmp/php-cgi.sock项修改成 fastcgi_pass 127.0.0.1:9000之后,网页 ...

  6. js字符串解析与转换成数字

    解析允许字符串中含有非法数字字符,解析按从左至右的顺序,如果遇到非数字字符就停止.而转换不允许出现非数字字符,否则会失败并返回NaN

  7. Selenium常用API的使用java语言之19-调用JavaScript代码

    虽然WebDriver提供了操作浏览器的前进和后退方法,但对于浏览器滚动条并没有提供相应的操作方法.在这种情况下,就可以借助JavaScript来控制浏览器的滚动条.WebDriver提供了execu ...

  8. 使用jQuery快速高效制作网页交互特效---JavaScript对象及初始面向对象

    一.JavaScript中的基本数据类型 number(数值类型)    string(字符串类型)    boolean(布尔类型)    null(空类型)    undefined(未定义类型) ...

  9. NO.24两两交换链表中的节点

    NO.24两两交换链表中的节点 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例:给定 1->2->3-&g ...

  10. yum -y install 问题解决

    1.错误如下: Last login: Thu Jul 26 09:04:14 2018 from 192.168.3.250[root@diagbot01 ~]# yum -y install do ...