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属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...
随机推荐
- 【xml】python的lxml库使用
1.官方教程:http://lxml.de/tutorial.html#parsing-from-strings-and-files 最重要的文档,看完基本就能用了 2.lxml支持xpath,xp ...
- CSS鼠标样式整理
鼠标样式的标签: cursor:*; //该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状: 鼠标样式: 值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一 ...
- SQLServer语句大使
1.创建数据库create database 数据库名字 2.删除数据库drop database 数据库名字3.创建表(identity(1,1)自动增长,倍数为1,primary key设置主键) ...
- java 小知识点
1.转Java中Vector和ArrayList的区别 首先看这两类都实现List接口,而List接口一共有三个实现类,分别是ArrayList.Vector和LinkedList.List用于存 ...
- redis的单实例配置+web链接redis
[root@cache01 src]# wget http://download.redis.io/redis-stable.tar.gz [root@cache01 src]# tar -xzvf ...
- poj 3253:Fence Repair（堆排序应用）
Fence Repair Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 23913 Accepted: 7595 Des ...
- Xamarin.Android开发实践（七）
Xamarin.Android广播接收器与绑定服务 一.前言 学习了前面的活动与服务后,你会发现服务对于活动而言似乎就是透明的,相反活动对于服务也是透明的,所以我们还需要一中机制能够将服务和活动之间架 ...
- mysql安装（Mac平台）
mac平台安装mysql有两种方式: 1)使用官方度dmg安装: 2)使用homebrew方式 本人比较推荐使用homebrew方式安装,省去大多数的麻烦,使用官方dmg方式推荐到官网下载:http: ...
- Java Hour 35 Weather ( 8 ) struts2 – message resource
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 35 刚发表了一条闪存,在这个公司快满3个月了,该正式决定留下来还是 ...
- GRE学习日志
发现开博客园真的很有督促作用,今天也顺便开个GRE学习日志吧 2015-02-09:单词 2015-02-10:单词 2015-02-11:单词 2015-03-02:阅读 2015-03-04:阅读 ...