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属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...
随机推荐
- 【python-mysql】在ubuntu下安装python-mysql环境
1.先安装mysql sudo apt-get install mysql-server apt-get isntall mysql-client sudo apt-get install libmy ...
- bootstrap学习总结1
什么是Bootstrap? bootstrap就是一个前端框架,有Twitter公司开发 最大的优点: 开源 : 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机. ...
- 分布式架构从零开始========》【基于Java自身技术实现消息方式的系统间通信】
基于Java自身包实现消息方式的系统间通信的方式有:TCP/IP+BIO,TCP/IP+NIO,UDP/IP+BIO,UDP/IP+NIO.下面就这4种类型一一做个详细的介绍: 一.TCP/IP+BI ...
- caffe 无GPU 环境搭建
root@k-Lenovo:/home/k# sudo apt-get install libprotobuf-dev libleveldb-dev libsnappy-dev libopencv-d ...
- SVN服务器搭建和使用（三）（转载）
转载地址:http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2408089.html 接下来,试试用TortoiseSVN修改文件,添加文件, ...
- Striiv Myland 攻略
推荐一款IOS平台上的运动APP:Striiv.可以记录平时的步数,路程,卡路里,运动时间.如果购买相应的硬件,还可以记录每天爬了多少台阶(这是专门为爬楼者用的么...). 其中比较吸引我的是里面有个 ...
- MATLAB学习笔记（八）——MATLAB数值积分与微分
(一)数值积分 一.数值积分的MATLAB实现方法: 1.变步长辛普生法(quad)法: (1)调用格式: [I,n]=quad('fname',a,b,tol,trace); fname是被积函数: ...
- Xamarin.iOS调试提示需要iOS SDK
Xamarin.iOS调试提示需要iOS SDK 错误信息:The version of Xamarin.iOS requires th iOS 9.3 SDK (shipped with Xco ...
- spring实战五之Bean的自动检测
在spring实战四中,使用在Spring中增加<context:annotation-config>的方式告诉Spring,我们打算使用基于注解的自动装配,希望Spring特殊对待我们所 ...
- LightOJ1033 Generating Palindromes（区间DP/LCS）
题目要计算一个字符串最少添加几个字符使其成为回文串. 一年多前,我LCS这道经典DP例题看得还一知半解时遇到一样的问题,http://acm.fafu.edu.cn/problem.php?id=10 ...