<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. cdh-hbase用户无法执行命令

  2. Linux sudo(CVE-2019-14287)漏洞复现过程

    简述: 该漏洞编号是CVE-2019-14287. sudo是Linux系统管理指令,允许用户在不需要切换环境的前提下用其他用户的权限运行程序或命令,通常是以root身份运行命令,以减少root用户的 ...

  3. Ubuntu16.04, CUDA8 CUDNN6 下安装 Tensorflow-gpu, Keras, Pytorch, fastai

    如何访问tensorflow官方网站 tensorflow官方网站变为:https://tensorflow.google.cn/ 安装深度学习框架 0. ubuntu查看CUDA和cuDNN版本 C ...

  4. 基于fastai的分类网络

    classify.fastai Classifier based on fastai 欢迎访问:https://github.com/pprp/classify.fastai/ 字符识别分类器-基于f ...

  5. pandas 4

    参考资料:https://mp.weixin.qq.com/s/QnxaOrvlWJn6Dr42Ic1CcQ 1  #只选取housing,loan,contac和poutcometest_data[ ...

  6. 找到一些经验,关于使用thymeleaf时遇到的一些问题

    最近一直在使用spring boot,所以自然而然的使用了thymeleaf,但是我想说习惯了jsp之后使用thymeleaf真实觉得不顺手,在使用thymeleaf中也遇到了一些问题,在这里记录一下 ...

  7. guava字符串工具--------Joiner 根据给定的分隔符把字符串连接到一起

    public class JoinerTest { public static void main(String args[]){ //1.将list字符串集合,以,形式转为字符串 List<S ...

  8. How To Add User To Sudoers On Debian 10 Buster

    In today’s tutorial, we are going to see how you can add a user to sudoers on Debian distributions. ...

  9. learning scala dependency injection

    println("Step 1: Create a trait which knows how to do create, read, update and delete operation ...

  10. 【luoguP4777】【模板】扩展中国剩余定理(EXCRT)

    (扩展)中国剩余定理 对于一组同余方程 \(x\equiv a_1(mod \quad n_1)\) \(x\equiv a_2(mod \quad n_2)\) \(x\equiv a_3(mod ...