CSS3:过渡大全
代码 地址：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:过渡大全的更多相关文章
- CSS3过渡、变形和动画
1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{ text-decoration: n ...
- CSS3学习（CSS3过渡、CSS3动画）
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
- css3 过渡记
CSS3 过渡 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. t ...
- CSS3 过渡
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 请把鼠标移动到右侧的元素上: 浏览器支持 Internet E ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- 【Demo】CSS3 过渡
CSS3 过渡transition 应用于宽度属性的过渡效果,时长为 2 秒: div { transition: width 2s; -webkit-transition: width 2s; /* ...
- CSS3 过渡、动画、多列、用户界面
CSS3 过渡.动画.多列.用户界面 transition过渡 transition: transition-property transition-duration transition-timin ...
- CSS3过渡与动画
一.CSS3 过渡 transition-property 规定过渡效果的 CSS 属性名 -webkit-transition-property: none / all / property; -m ...
- css3过渡动画 transition
transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果. 要实现这一点,必须规定两项内容: 指定要添加效果的CSS属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...
随机推荐
- Java 全半角转换
* 全角转半角的 转换函数* @return String*/public static final String full2HalfChange(String QJstr){StringBuffer ...
- 调试工具GDB详解
1 简介 2 生成调试信息 3 启动GDB 的方法 4 程序运行上下文 4.1 程序运行参数 4.2 工作目录 4.3 程序的输入输出 5 设置断点 5.1 简单断点 5.2 多文件设置断点 5.3 ...
- export 解决环境变量的问题！！！！
export PATH="/usr/local/sbin:/usr/sbin:/sbin:/usr/local/bin:/usr/bin:/bin:/root/bin" 如果/et ...
- grep -w
[root@86 ~]# mysqladmin -uroot -p123456 -S /tmp/mysql.sock extended-status|grep -w "Com_update& ...
- 分布式系统唯一ID生成方案汇总
系统唯一ID是我们在设计一个系统的时候常常会遇见的问题,也常常为这个问题而纠结.生成ID的方法有很多,适应不同的场景.需求以及性能要求.所以有些比较复杂的系统会有多个ID生成的策略.下面就介绍一些常见 ...
- OAuth2 通用组件源码下载(支持新浪微博、QQ、淘宝)(转载)
转载地址:http://www.cyqdata.com/download/article-detail-54302 OAuth2 社区通用组件说明: 源码为C#(.NET)写成,目前支持新浪微博. ...
- Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
index.php代码 [html] view plaincopy <!DOCTYPE html PUBLIC ;} .single_item{padding: ...
- POJ1236 - Network of Schools tarjan
Network of Schools Time Limit: 1000MS Memory Limi ...
- ArcGIS for Android地图控件的5大常见操作
GIS的开发中,什么时候都少不了地图操作.ArcGIS for Android中,地图组件就是MapView,MapView是基于Android中ViewGroup的一个类(参考),也是ArcGIS ...
- 【转】apache kafka技术分享系列(目录索引)
转自: http://blog.csdn.net/lizhitao/article/details/39499283 估计大神会不定期更新,所以还是访问这个链接看最新的目录list比较好 apa ...