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)"; } }
效果:
Angular 执行 css3 简单的动画的更多相关文章
- css3 简单界面动画
asdasdasdasda asdasdasdasda
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- CSS3的自定义动画帧
CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...
- iOS开发UI篇—iOS开发中三种简单的动画设置
iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- 分享9款极具创意的HTML5/CSS3进度条动画
1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...
随机推荐
- Linux命令——lsb_release
简介 LSB是Linux Standard Base(Linux标准库)的缩写, lsb_release命令 用来与具体Linux发行版相关的Linux标准库信息. 注:LSB的译法有Linux标准库 ...
- Codeforces Round #512 (Div. 2) D. Vasya and Triangle(几何+思维)
题目 题意: 给出 n,m,k ,让你在长为 n,宽为 m 的坐标系里构建一个三角形,使得面积= n*m/k.如果存在,输出“YES”,输出三角形三个顶点的坐标: 如果不存在,输出“NO”. 思路: ...
- FM系列
在计算广告中,CTR是非常重要的一环.对于特征组合来说,业界通用的做法主要有两大类:FM系列和Tree系列.这里我们来介绍一下FM系列. 在传统的线性模型中,每个特征都是独立的,如果需要考虑特征与特征 ...
- 转【Ubuntu】添加虚拟网卡的三种方式
原文:https://blog.csdn.net/White_Idiot/article/details/82934338 ------------------------------ 1. ifco ...
- 大数据之路week06--day07(Linux中的mysql的离线安装)
这里我提供 服务端和客户端的两个jar包的百度云,也是我使用的 链接:https://pan.baidu.com/s/11a3LT-ENZ8n9IF19-VjmWA 提取码:bdls 离线安装Mysq ...
- SCOI2018 树
树 时间限制 3000ms 内存限制 64MB [题目描述] 在大小为 N 的树上,点从 1 到 N 标号,第 i 个点有权值 Ai,现在需要支持两种操作: 第一种操作格式为"1 U&quo ...
- XSLT可扩展样式表语言转换 System.Xml.Xsl、XslCompiledTransform类
XML文件 books.xml: <?xml version="1.0" encoding="utf-8" ?> <bookstore> ...
- 基于pg_qualstats和hypopg的自动索引调优
pg-qualstats的安装和配置 1.安装pg-qualstats -pg-qualstats 2.将pg_qualstats和pg_stat_statements添加到shared_preloa ...
- js for/in循环及其它
for in 循环不仅可以遍历对象的属性,还可以遍历数组. Js 中为数组提供了多种遍历方式 const ary = ['a', 'b', 'c']; // 最基本的方式, 只能遍历下标有序递增的数组 ...
- 进程 multiprocessing Process join Lock Queue
多道技术 1.空间上的复用 多个程序公用一套计算机硬件 2.时间上的复用 cpu 切换程序+保存程序状态 1.当一个程序遇到IO操作,操作系统会剥夺该程序的cpu执行权限(提高了cpu的利用率,并且不 ...