关键是首先指定动画效果的CSS属性名称，然后在Js中改变这个属性

如果不使用Js触发，可以选择利用css的状态：hover，focus，active 来触发，也可以一开始就触发

下例为Js点击触发过渡Transitions效果，指定的属性名称是width

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.     #aaa {
  6.       width: 100px;
  7.       height: 100px;
  8.       background: blue;
  9.       transition: width 2s;
  10.       -moz-transition: width 2s; /* Firefox 4 */
  11.       -webkit-transition: width 2s; /* Safari and Chrome */
  12.       -o-transition: width 2s; /* Opera */
  13.     }
  14.   </style>
  15.   <script>
  16.     function big() {
  17.       document.getElementById("aaa").style.width = "300px";
  18.     }
  19.     function small() {
  20.       document.getElementById("aaa").style.width = "100px";
  21.     }
  22.   </script>
  23. </head>
  24. <body>
  25.   <button onclick="big()">Big</button>
  26.   <button onclick="small()">Small</button>
  27.   <div id="aaa"></div>
  28. </body>
  29. </html>

原创文章，欢迎转载，转载请注明出处！

Js点击触发Css3的动画Animations、过渡Transitions效果的更多相关文章

  1. css3关键帧动画实现轮播效果

    实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...

  2. 使用css动画实现领积分效果

    最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...

  3. js代码点击触发事件

    js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...

  4. js和jquery触发按钮点击事件

    js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...

  5. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  6. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  7. 深入A标签点击触发事件而不跳转的详解

    本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...

  8. CSS3 动画及过渡详解

    今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...

  9. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

随机推荐

  1. python爬虫随笔(2)—启动爬虫与xpath

    启动爬虫 在上一节中,我们已经创建好了我们的scrapy项目,看着这一大堆文件,想必很多人都会一脸懵逼,我们应该怎么启动这个爬虫呢? 既然我们采用cmd命令创建了scrapy爬虫,那就得有始有终有逼格 ...

  2. nginx Location 语法基础知识

    URL地址匹配是Nginx配置中最灵活的部分 Location 支持正则表达式匹配,也支持条件匹配,用户可以通过location指令实现Nginx对动丶静态网页的过滤处理. Nginx locatio ...

  3. H5 35-背景平铺属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Linux进程与线程的区别

    进程与线程的区别,早已经成为了经典问题.自线程概念诞生起,关于这个问题的讨论就没有停止过.无论是初级程序员,还是资深专家,都应该考虑过这个问题,只是层次角度不同罢了.一般程序员而言,搞清楚二者的概念, ...

  5. Day5 Pyhton基础之编码与解码（四）

    1.编码与解码 1.1现在常用的编码类型

  6. iOS保持App真后台运行

    https://www.jianshu.com/p/d466f2da0d33 在我看来,苹果系统与安卓系统最直观的区别就是后台处理方式了吧,安卓手机一旦开启了很多app放到后台,即使前台什么也不做,就 ...

  7. Django的contenttypes

    这是一个django内置的表结构,为的就是通过两个字段让表和N张表创建FK关系. 比如说有两种不同课程,这两种课程都有价格周期和策略.如果最低级的则是给每个表创建一个价格策略.如果非要在同一个表内使用 ...

  8. js 精确验证身份证（地址编码、出生日期、校验位验证）

    //身份证号合法性验证 //支持15位和18位身份证号 //支持地址编码.出生日期.校验位验证 function IdentityCodeValid(code) { ::::::::::::::::: ...

  9. 6 Prefer and Would rather

    1 prefer 使用 "prefer" 用来表明通常喜欢某件事甚于另一件事.说话者喜欢打高尔夫球更甚于喜欢打网球."prefer" 的后面可以接名词(&quo ...

  10. findBugs安装

    点击“Help->InstallNew Software”,如下图所示: 2 接着如下图所示: 3 Name”输入“findBugs”,“Location”输入“http://findbugs. ...