代码 地址: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:过渡大全的更多相关文章

  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. 【python-mysql】在ubuntu下安装python-mysql环境

    1.先安装mysql sudo apt-get install mysql-server apt-get isntall mysql-client sudo apt-get install libmy ...

  2. bootstrap学习总结1

    什么是Bootstrap? bootstrap就是一个前端框架,有Twitter公司开发 最大的优点: 开源 : 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机. ...

  3. 分布式架构从零开始========》【基于Java自身技术实现消息方式的系统间通信】

    基于Java自身包实现消息方式的系统间通信的方式有:TCP/IP+BIO,TCP/IP+NIO,UDP/IP+BIO,UDP/IP+NIO.下面就这4种类型一一做个详细的介绍: 一.TCP/IP+BI ...

  4. caffe 无GPU 环境搭建

    root@k-Lenovo:/home/k# sudo apt-get install libprotobuf-dev libleveldb-dev libsnappy-dev libopencv-d ...

  5. SVN服务器搭建和使用(三)(转载)

    转载地址:http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2408089.html 接下来,试试用TortoiseSVN修改文件,添加文件, ...

  6. Striiv Myland 攻略

    推荐一款IOS平台上的运动APP:Striiv.可以记录平时的步数,路程,卡路里,运动时间.如果购买相应的硬件,还可以记录每天爬了多少台阶(这是专门为爬楼者用的么...). 其中比较吸引我的是里面有个 ...

  7. MATLAB学习笔记(八)——MATLAB数值积分与微分

    (一)数值积分 一.数值积分的MATLAB实现方法: 1.变步长辛普生法(quad)法: (1)调用格式: [I,n]=quad('fname',a,b,tol,trace); fname是被积函数: ...

  8. Xamarin.iOS调试提示需要iOS SDK

    Xamarin.iOS调试提示需要iOS SDK   错误信息:The version of Xamarin.iOS requires th iOS 9.3 SDK (shipped with Xco ...

  9. spring实战五之Bean的自动检测

    在spring实战四中,使用在Spring中增加<context:annotation-config>的方式告诉Spring,我们打算使用基于注解的自动装配,希望Spring特殊对待我们所 ...

  10. LightOJ1033 Generating Palindromes(区间DP/LCS)

    题目要计算一个字符串最少添加几个字符使其成为回文串. 一年多前,我LCS这道经典DP例题看得还一知半解时遇到一样的问题,http://acm.fafu.edu.cn/problem.php?id=10 ...