在组件html中

  <div>
    <aside id="aside">侧边栏</aside>
      <div class="content">
      <p><button (click)="showaside()">弹出侧边框</button></p>
      <p><button (click)="hiddenaside()">隐藏侧边框</button></p>
      <p> <button (click)="toggleaside()" id="togglebtn">显示与隐藏</button></p>
    </div>
  </div>
 
css中:
  #aside{width: 200px; height: 100%;position: absolute; right: 0;top: 0; background-color: #000 ; color:#fff;transform: translate(100%,0);transition: all 2s}
 
ts 中
 

  showaside(){
    var asideDom:any = document.getElementById("aside");
    asideDom.style.transform="translate(0%,0)";
}
  hiddenaside(){
    var asideDom:any = document.getElementById("aside");
    asideDom.style.transform="translate(100%,0)";
  }

ng执行css3动画的更多相关文章

  1. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

  2. css3动画,监控动画执行完毕

    在CSS3之前,在网页上要做动画,一般使用javascript来实现,用timer定时执行一些操作来实现动画效果. 自有了CSS3之后,在网页上做动画变得更简单了.相对于使用javascript的实现 ...

  3. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

  4. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  6. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  7. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  8. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

  1. txt 文件的归并和分割

    1.归并 import os # 1.获取需要整合的文件目录下的 filepath = "G:\\我的python\\尹成\\python基础\\day13\\详细分类\\详细地区" ...

  2. CodeForces 979 D Kuro and GCD and XOR and SUM

    Kuro and GCD and XOR and SUM 题意:给你一个空数组. 然后有2个操作, 1是往这个数组里面插入某个值, 2.给你一个x, k, s.要求在数组中找到一个v,使得k|gcd( ...

  3. lightoj 1134 - Be Efficient(组合数)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1134 题解:简单的一道组合题,现求一下前缀和,然后只要找前缀和膜m的结果相同的 ...

  4. 模板汇总——KMP & EX-KMP

    1. kmp 相当于往前求出一段字符信息,使得 这段字符信息和前缀相等. void getnext(){ , j = ; nx[] = -; while(j < m){ || b[j] == b ...

  5. JOBDU 1027 欧拉回路

    题目1027:欧拉回路 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3620 解决:1847 题目描述:     欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条 ...

  6. hdu 1671 Phone List 字典树模板

    Given a list of phone numbers, determine if it is consistent in the sense that no number is the pref ...

  7. java 面试题 1-10

    1. Java 基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法, 线程的语法,集合的语法,io 的语法,虚拟机方面的语法 1.一个".java&q ...

  8. PHP 通过curl POST传递 伪造cookie 传递信息

    一些论坛网站需要每日签到太麻烦,于是写了一个Win 的定时任务,通过curl 去处理传递的伪造Cookie 和 header; 有不妥的地方,希望各位大佬们多多指正,谢谢各位大佬: $fp = @fo ...

  9. Python二元操作符

    def quiz_message(grade): outcome = 'failed' if grade<50 else 'passid' print ('grade', grade, 'out ...

  10. print.js继承原有样式

    npm install --save print-js import Print from 'print-js' 调用print.js插件 Print({ printable: 'printJS-fo ...