<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. Linux命令——lsb_release

    简介 LSB是Linux Standard Base(Linux标准库)的缩写, lsb_release命令 用来与具体Linux发行版相关的Linux标准库信息. 注:LSB的译法有Linux标准库 ...

  2. Codeforces Round #512 (Div. 2) D. Vasya and Triangle(几何+思维)

    题目 题意: 给出 n,m,k ,让你在长为 n,宽为 m 的坐标系里构建一个三角形,使得面积= n*m/k.如果存在,输出“YES”,输出三角形三个顶点的坐标:  如果不存在,输出“NO”. 思路: ...

  3. FM系列

    在计算广告中,CTR是非常重要的一环.对于特征组合来说,业界通用的做法主要有两大类:FM系列和Tree系列.这里我们来介绍一下FM系列. 在传统的线性模型中,每个特征都是独立的,如果需要考虑特征与特征 ...

  4. 转【Ubuntu】添加虚拟网卡的三种方式

    原文:https://blog.csdn.net/White_Idiot/article/details/82934338 ------------------------------ 1. ifco ...

  5. 大数据之路week06--day07(Linux中的mysql的离线安装)

    这里我提供 服务端和客户端的两个jar包的百度云,也是我使用的 链接:https://pan.baidu.com/s/11a3LT-ENZ8n9IF19-VjmWA 提取码:bdls 离线安装Mysq ...

  6. SCOI2018 树

    树 时间限制 3000ms 内存限制 64MB [题目描述] 在大小为 N 的树上,点从 1 到 N 标号,第 i 个点有权值 Ai,现在需要支持两种操作: 第一种操作格式为"1 U&quo ...

  7. XSLT可扩展样式表语言转换 System.Xml.Xsl、XslCompiledTransform类

    XML文件 books.xml: <?xml version="1.0" encoding="utf-8" ?> <bookstore> ...

  8. 基于pg_qualstats和hypopg的自动索引调优

    pg-qualstats的安装和配置 1.安装pg-qualstats -pg-qualstats 2.将pg_qualstats和pg_stat_statements添加到shared_preloa ...

  9. js for/in循环及其它

    for in 循环不仅可以遍历对象的属性,还可以遍历数组. Js 中为数组提供了多种遍历方式 const ary = ['a', 'b', 'c']; // 最基本的方式, 只能遍历下标有序递增的数组 ...

  10. 进程 multiprocessing Process join Lock Queue

    多道技术 1.空间上的复用 多个程序公用一套计算机硬件 2.时间上的复用 cpu 切换程序+保存程序状态 1.当一个程序遇到IO操作,操作系统会剥夺该程序的cpu执行权限(提高了cpu的利用率,并且不 ...