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

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

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

<!DOCTYPE html>

<html>

<head>

  <style>

    #aaa {

      width: 100px;

      height: 100px;

      background: blue;

      transition: width 2s;

      -moz-transition: width 2s; /* Firefox 4 */

      -webkit-transition: width 2s; /* Safari and Chrome */

      -o-transition: width 2s; /* Opera */

    }

  </style>

  <script>

    function big() {

      document.getElementById("aaa").style.width = "300px";

    }

    function small() {

      document.getElementById("aaa").style.width = "100px";

    }

  </script>

</head>

<body>

  <button onclick="big()">Big</button>

  <button onclick="small()">Small</button>

  <div id="aaa"></div>

</body>

</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. ACM/ICPC 2018亚洲区预选赛北京赛站网络赛D-80 Days--------树状数组

    题意就是说1-N个城市为一个环,最开始你手里有C块钱,问从1->N这些城市中,选择任意一个,然后按照顺序绕环一圈,进入每个城市会有a[i]元钱,出来每个城市会有b[i]个城市,问是否能保证经过每 ...

  2. c++入门之内置数组和array比较

    array是C++11中新提出来的容器类型,与内置数组相比,array是一种更容易使用,更加安全的数组类型,可以用来替代内置数组.作为数组的升级版,继承了数组最基本的特性,也融入了很多容器操作,下面介 ...

  3. Vladik and Complicated Book CodeForces - 811B (思维实现)

    Vladik had started reading a complicated book about algorithms containing n pages. To improve unders ...

  4. jenkins+maven+tomcat集群发布

    jenkins+Gitlab+maven+tomcat实现自动集成.打包.部署 - 李栋94 - 博客园https://www.cnblogs.com/lidong94/p/7427923.html ...

  5. React Native之微信分享(iOS Android)

    React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...

  6. 一次linux问题分析原因的简要记录

    1. 这边功能测试 一个linux服务器 4c 16g的内存 发现总是出现异常. dotnet run 起来的一个 程序 总是会被killed 现象为: 2. 一开始怀疑是 打开的文件描述符过多 引起 ...

  7. CMake--变量

    1.一般变量 1)CMake变量引用的方式 使用${}进行变量的引用.例如: ${PROJECT_NAME} #返回项目名称 在 IF 等语句中,是直接使用变量名而不通过${}取值. 2)cmake自 ...

  8. Sigma Function

    做完这道题,我明白了人生的一个巨大道理,那就是: 其他题研究两下,做出来几百行.数论码字前研究半天,做出来十几二十行.做完特别没有成就感... 首先说下这题题意:首先,定义一个函数f[n],即为他所有 ...

  9. Vue2.0 子组件和父组件之间的传值

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  10. Spring Boot(1)——开发你的第一款Spring Boot应用(Edition1)

    Spring Boot(1)——开发你的第一款Spring Boot应用(Edition1) 准备工作: java:java 8 或者 java 9: Spring框架:5.0.8.RELEASE或以 ...