CSS3:过渡大全
2016-05-11 14:18
393 查看
代码 地址:http://jsbin.com/moquyesumi/edit?html,output
<!DOCTYPE HTML> <html> <head> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>过渡</title> <style> /**************************************************注意********************************** 1,(区分过渡和动画):过渡由事件触发。 2,(事件之后样式自动去除之后)事件不存在(hover样式自动去除,hover结束),返回原来样式 ********/ /*0,要过渡的样式:all 和不写默认全部*/ /*要添加多个样式的变换效果,添加的属性由逗号分隔:*/ .box0{width:100px;height:100px;background:red;opacity:0.1; transition:height 5s, width ,5s;} .box0:hover{ background:blue;width:200px;opacity:1;height:300px;} /*1,过渡时间*/ .box1{width:100px;height:100px;background:red; transition:500ms;} .box1:hover{ background:blue;width:200px;height:200px;} /*2,延时时间:3s后过渡 */ .box2{width:100px;height:100px;background:red; transition:width 2s 1s;} .box2:hover{ background:blue;width:200px;height:200px;} /*3,运动形式 ease:(逐渐变慢)默认值 linear:(匀速) ease-in:(加速) ease-out:(减速) ease-in-out:(先加速后减速) cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 ) http://matthewlein.com/ceaser/ */ .box3{width:100px;height:100px;background:red; transition:width 5s 1s ease-out;} .box3:hover{ background:blue;width:500px;height:200px;} /*4,贝塞尔曲线可以设置过渡的过程中,超出最终值,最后还是到最终值*/ .box4{width:100px;height:100px;background:red; transition:width 5s .2s cubic-bezier(0.000, 1.650, 0.625, 1.650);} .box4:hover{ background:blue;width:500px;height:200px;} /*********************************其他事件触发过渡(js控制)**********************************************/ .box5{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;} .box5:hover{ background:blue;width:200px;height:200px;} /*click触发:注意和css伪类hover区别,触发了就过渡到改变之后的样式,不像hover那样返回原来*/ .box6{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;} .box6click{background:blue;width:200px;height:200px;}/* transition:all 2s .1s ease-in;*/ /*.box6click2{width:100px;height:100px;background:red;}*/ /*添加过渡完事件 Webkit内核: obj.addEventListener('webkitTransitionEnd',function(){},false); firefox: obj.addEventListener('transitionend',function(){},false); */ /*移除过渡完事件 Webkit内核: obj.removeEventListener('webkitTransitionEnd',function(){},false); firefox: obj.removeEventListener('transitionend',function(){},false); */ #box7{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;} #box8{width:100px;height:100px;background:red; transition:all 2s .1s ease-in;} #box9,#box10{width:100px;height:100px;background:green;} </style> <script> window.onload=function(){//onload 小写~ //封装不同浏览器添加 过渡结束事件 function addTranEndEvt(obj,fn){ obj.addEventListener('webkitTransitionEnd',fn,false); obj.addEventListener('transitionend',fn,false); } //封装不同浏览器移除 过渡结束事件 function removeTranEndEvt(obj,fn){ obj.removeEventListener('webkitTransitionEnd',fn,false); obj.removeEventListener('transitionend',fn,false); } /***************触发次数*************************/ var div7=document.getElementById("box7"); addTranEndEvt(div7,function(){ alert('1个属性过渡好');//过渡完(每改变一个样式属性,就会触发一次end事件) }) div7.onclick=function(){//结果注意:连续点下,会不断的在最后过渡结果基础上再过渡 //每改变一个样式属性,就会触发一次end事件 this.style.width=this.offsetWidth+100+'px'; this.style.height=this.offsetHeight+100+'px'; } /*******addEventListener注册和removeEventListener移除必须为同一个事件(多一层封装)*************/ var div8=document.getElementById("box8"); /* addTranEndEvt(div8,function (){ this.style.width=this.offsetWidth+200+'px'; //这种移除监听方法不行: //因为括号内的addTranEndEvt和外面的addTranEndEvt不是同一个 //要想实现同一个,我们必须封装addWidth做为addTranEndEvt的参数, //也可以做为removeTranEndEvt的参数 removeTranEndEvt(this,addTranEndEvt); });*/ function addWidth(){ this.style.width=this.offsetWidth+200+'px'; removeTranEndEvt(this,addWidth); } addTranEndEvt(div8,addWidth); div8.onclick=function(){ this.style.width=this.offsetWidth+100+'px'; } /**** addEventListener注册和removeEventListener移除必须为同一个事件(多一层封装)*********/ var div9=document.getElementById("box9"); div9.addEventListener('click',function(){ alert(1) }) div9.removeEventListener('click',function(){ alert(1)//无效,不能能移除 }) var div10=document.getElementById("box10"); function dosth(){ alert(2)} var div10=document.getElementById("box9"); div10.addEventListener('click',dosth) div10.removeEventListener('click',dosth)//可以移除 } $(function(){ $('.box6').click(function(){ $(this).addClass("box6click"); }) /* var i=0; $('.box6').click(function(){ ++i; console.log(i); if(i%2==1){ $(this).addClass("box6click"); } else if(i%2==0){ $(this).addClass("box6click2"); $(this).removeClass("box6click2"); } })*/ }) </script> </head> <body> <div class="box0">0</div> <hr/> <div class="box1">1</div> <hr/> <div class="box2">2</div> <hr/> <div class="box3">3</div> <hr/> <div class="box4">4</div> <hr/> <div class="box5">5</div> <hr/> <div class="box6">6</div> <hr/> <div id="box7">7</div> <hr/> <div id="box8">8</div> <hr/> <div id="box9">9</div> <hr/> <div id="box10">10</div> </body> </html>
相关文章推荐
- css3动画实例测试
- IE兼容性 css hack
- CSS学习
- 用CSS下划线距离
- 垂直外边距合并--CSS的Margin属性:详解margin属性
- CSS的一些学习笔记(一)
- 转:【译】CSS3:clip-path详解
- tableView的plain 和grouped 样式
- css的一些总结和注意点
- [版本V2.0]当使用【横向菜单】样式的时候,点击菜单项没有反应问题
- CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
- CSS样式表继承详解
- CSS position 属性
- CSS3box-shadow属性的使用
- CSS魔法堂:Position定位详解
- css3实战版的点击列表项产生水波纹动画
- JAVA中修改JOptionPane的字体样式(Font)
- 获取元素CSS值之getComputedStyle方法
- css定义超级链接a标签里面的title的样式
- 利用PopupWindow做出仿IOS样式的选择器