代码 地址：http://jsbin.com/moquyesumi/edit?html,output

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>过渡</title>
  7. <style>
  8.  /**************************************************注意**********************************
  9.  1，(区分过渡和动画)：过渡由事件触发。
  10.  2，(事件之后样式自动去除之后）事件不存在(hover样式自动去除，hover结束)，返回原来样式
  11.  ********/
  13.   /*0，要过渡的样式：all 和不写默认全部*/
  14.   /*要添加多个样式的变换效果，添加的属性由逗号分隔：*/
  15. .box0{width:100px;height:100px;background:red;opacity:0.1; transition:height 5s, width ,5s;}
  16. .box0:hover{ background:blue;width:200px;opacity:1;height:300px;}
  18.   /*1，过渡时间*/
  19. .box1{width:100px;height:100px;background:red; transition:500ms;}
  20. .box1:hover{ background:blue;width:200px;height:200px;}
  22.   /*2，延时时间：3s后过渡 */
  23. .box2{width:100px;height:100px;background:red; transition:width 2s 1s;}
  24. .box2:hover{ background:blue;width:200px;height:200px;}
  25.   /*3，运动形式
  26.   ease：（逐渐变慢）默认值
  27.   linear：（匀速）
  28.   ease-in：(加速)
  29.   ease-out：（减速）
  30.   ease-in-out：（先加速后减速）
  31.   cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）
  32.   http://matthewlein.com/ceaser/
  33.   */
  34. .box3{width:100px;height:100px;background:red; transition:width 5s 1s ease-out;}
  35. .box3:hover{ background:blue;width:500px;height:200px;}
  36.   /*4，贝塞尔曲线可以设置过渡的过程中，超出最终值，最后还是到最终值*/
  37. .box4{width:100px;height:100px;background:red; transition:width 5s .2s cubic-bezier(0.000, 1.650, 0.625, 1.650);}
  38. .box4:hover{ background:blue;width:500px;height:200px;}
  39.  /*********************************其他事件触发过渡（js控制）**********************************************/
  41. .box5{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;}
  42. .box5:hover{ background:blue;width:200px;height:200px;}
  43.   /*click触发:注意和css伪类hover区别，触发了就过渡到改变之后的样式，不像hover那样返回原来*/
  44.  .box6{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;}
  45.  .box6click{background:blue;width:200px;height:200px;}/* transition:all 2s .1s ease-in;*/
  46.  /*.box6click2{width:100px;height:100px;background:red;}*/
  48.  /*添加过渡完事件
  49.   Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
  50.   firefox: obj.addEventListener('transitionend',function(){},false);
  51.   */
  52.   /*移除过渡完事件
  53.   Webkit内核： obj.removeEventListener('webkitTransitionEnd',function(){},false);
  54.   firefox: obj.removeEventListener('transitionend',function(){},false);
  55.   */
  56.   #box7{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;}
  57.   #box8{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;}
  58.   #box9,#box10{width:100px;height:100px;background:green;}
  60. </style>
  61.   <script>   
  63.       window.onload=function(){//onload 小写~
  64.        //封装不同浏览器添加 过渡结束事件
  65.         function addTranEndEvt(obj,fn){
  66.           obj.addEventListener('webkitTransitionEnd',fn,false);
  67.           obj.addEventListener('transitionend',fn,false);
  68.         }
  69.         //封装不同浏览器移除 过渡结束事件
  70.          function removeTranEndEvt(obj,fn){
  71.           obj.removeEventListener('webkitTransitionEnd',fn,false);
  72.           obj.removeEventListener('transitionend',fn,false);
  73.         }
  75. /***************触发次数*************************/
  76.         var div7=document.getElementById("box7");
  77.         addTranEndEvt(div7,function(){
  78.           alert('1个属性过渡好');//过渡完（每改变一个样式属性，就会触发一次end事件）
  79.         })
  80.         div7.onclick=function(){//结果注意：连续点下，会不断的在最后过渡结果基础上再过渡
  81.           //每改变一个样式属性，就会触发一次end事件
  82.           this.style.width=this.offsetWidth+100+'px';
  83.            this.style.height=this.offsetHeight+100+'px';
  84.         }
  86. /*******addEventListener注册和removeEventListener移除必须为同一个事件（多一层封装）*************/
  87.          var div8=document.getElementById("box8");
  88.          /* addTranEndEvt(div8,function (){
  89.            this.style.width=this.offsetWidth+200+'px';
  90.            //这种移除监听方法不行：
  91.            //因为括号内的addTranEndEvt和外面的addTranEndEvt不是同一个
  92.            //要想实现同一个，我们必须封装addWidth做为addTranEndEvt的参数，
  93.            //也可以做为removeTranEndEvt的参数
  94.           removeTranEndEvt(this,addTranEndEvt);
  95.         });*/
  96.         function addWidth(){
  97.            this.style.width=this.offsetWidth+200+'px';
  98.            removeTranEndEvt(this,addWidth);
  99.         }
  100.        addTranEndEvt(div8,addWidth);
  101.           div8.onclick=function(){
  102.             this.style.width=this.offsetWidth+100+'px';
  103.         }
  105.   /**** addEventListener注册和removeEventListener移除必须为同一个事件（多一层封装）*********/
  106.            var div9=document.getElementById("box9");
  107.         div9.addEventListener('click',function(){
  108.           alert(1)
  109.         })
  110.          div9.removeEventListener('click',function(){
  111.           alert(1)//无效，不能能移除
  112.         })
  113.         var div10=document.getElementById("box10");
  115.          function dosth(){ alert(2)}
  116.           var div10=document.getElementById("box9");
  117.         div10.addEventListener('click',dosth)
  118.          div10.removeEventListener('click',dosth)//可以移除
  119.     }
  121.    $(function(){
  122.       $('.box6').click(function(){
  123.         $(this).addClass("box6click");
  124.       })
  126.       /* var i=0;
  127.       $('.box6').click(function(){
  128.         ++i;
  129.         console.log(i);
  130.         if(i%2==1){
  131.         $(this).addClass("box6click");
  132.           }
  133.         else if(i%2==0){
  134.           $(this).addClass("box6click2");
  135.           $(this).removeClass("box6click2");
  136.          }
  137.       })*/
  138.     })
  140.   </script>
  141. </head>
  142. <body>
  143.   <div class="box0">0</div>
  144.     <hr/>
  145. <div class="box1">1</div>
  146.   <hr/>
  147.   <div class="box2">2</div>
  148.     <hr/>
  149.   <div class="box3">3</div>
  150.    <hr/>
  151.   <div class="box4">4</div>
  153. <hr/>
  154.   <div class="box5">5</div>
  155.   <hr/>
  156.   <div class="box6">6</div>
  157.     <hr/>
  158.   <div id="box7">7</div>
  159.     <hr/>
  160.   <div id="box8">8</div>
  161.       <hr/>
  162.   <div id="box9">9</div>
  163.   <hr/>
  164.   <div id="box10">10</div>
  166. </body>
  167. </html>

运行

CSS3:过渡大全的更多相关文章

  1. CSS3过渡、变形和动画

    1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{     text-decoration: n ...

  2. CSS3学习（CSS3过渡、CSS3动画）

    CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...

  3. css3 过渡记

    CSS3 过渡 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. t ...

  4. CSS3 过渡

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 请把鼠标移动到右侧的元素上: 浏览器支持 Internet E ...

  5. 从零开始学习前端开发 — 15、CSS3过渡、动画

    一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...

  6. 【Demo】CSS3 过渡

    CSS3 过渡transition 应用于宽度属性的过渡效果,时长为 2 秒: div { transition: width 2s; -webkit-transition: width 2s; /* ...

  7. CSS3 过渡、动画、多列、用户界面

    CSS3 过渡.动画.多列.用户界面 transition过渡 transition: transition-property transition-duration transition-timin ...

  8. CSS3过渡与动画

    一.CSS3 过渡 transition-property 规定过渡效果的 CSS 属性名 -webkit-transition-property: none / all / property; -m ...

  9. css3过渡动画 transition

    transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果. 要实现这一点,必须规定两项内容: 指定要添加效果的CSS属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...

随机推荐

  1. VS2010设置C++包含目录和库目录

    视图-属性管理器-随便选择一个项目例如MyProject-Debug|Win32-Microsoft.Cpp.Win32.user-右键“属性”-VC++目录 Release同理

  2. 当Android工程中提示你找不到头文件，但你已经设置头文件路径了

    虽然在Android.mk文件中,配置了LOCAL_C_INCLUDES路径,但是工程中的红色叉号一直提示找不到头文件 这时,你在工程树目录中展开Includes项,捣鼓捣鼓,重新build下,或许就 ...

  3. input框颜色修该

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 实现dom元素拖动

    本文主要写一下如何实现dom元素拖动,目前使用jquery库实现之. 主要的注释附在代码中,大家可以根据代码画一个小的窗口模型图,以便于理解. <!DOCTYPE html> <ht ...

  5. Android学习笔记——文件路径(/mnt/sdcard/...)、Uri(content://media/external/...)学习

    一.URI 通用资源标志符(Universal Resource Identifier, 简称"URI"). Uri代表要操作的数据,Android上可用的每种资源 - 图像.视频 ...

  6. EF架构~为EF DbContext生成的实体添加注释（T5模板应用）（转载）

    转载地址:http://www.newlifex.com/showtopic-1072.aspx 最近新项目要用Entity Framework 6.x,但是我发现从数据库生成模型时没有生成字段的注释 ...

  7. poj 2926:Requirements（最远曼哈顿距离，入门题）

    Requirements Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 3908   Accepted: 1318 Desc ...

  8. iOS经典面试题

    前言 写这篇文章的目的是因为前两天同学想应聘iOS开发,从网上找了iOS面试题和答案让我帮忙看看.我扫了一眼,倒吸了一口冷气,仔细一看,气的发抖.整篇题目30多个没有一个答案是对的,总结这篇面试题的作 ...

  9. 用VMware9 安装 mac 10.8和10.9搜集的资料

    VMware9虚拟机安装MAC OS X Mountain Lion 10.8.2详细图文教程 http://diybbs.zol.com.cn/1/34037_699.html vmware too ...

  10. Android图形基础

    Android图形基础 Android在其android.graphics包中提供了完整的本机二维图像库. Color类,代表颜色,是用4个数字表示的,透明度.红色.绿色和蓝色(Alpha.Red.G ...