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属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...
随机推荐
- php的socket通信（二）
案例一:代码详解 // 设置一些基本的变量$host = "192.168.1.99";$port = 1234;// 设置超时时间set_time_limit(0);// 创建一 ...
- CSDN客户端实现
本文主要讲解实现了一个CSDN的安卓客户端,主要知识点如下 java爬虫获取网页数据 将java程序打包成jar包 Fragment+viewpager+TabPageIndicator实现Tab效果 ...
- android 的四种枚举Context.MODE_PRIVATE
标签: mode_private Context.MODE_PRIVATE:为默认操作模式,代表该文件是私有数据,只能被应用本身访问,在该模式下,写入的内容会覆盖原文件的内容,如果想把新写入的内容追加 ...
- 第六步：Lucene查询索引
package cn.harmel.lucene; import java.io.IOException; import java.nio.file.Paths; import org.apache. ...
- hrbustoj 1179:下山（DFS+剪枝）
下山Time Limit: 1000 MS Memory Limit: 65536 KTotal Submit: 271(111 users) Total Accepted: 129(101 user ...
- 微信jsapi接口测试
微信jsapi接口测试 <?php require_once 'lib.inc.php'; $wx = new WxApi(); if(!isset($_GET['code'])){ heade ...
- java线程安全总结
转自:http://blog.csdn.net/haolongabc/article/details/7249098 最近想将java基础的一些东西都整理整理,写下来,这是对知识的总结,也是一种乐趣. ...
- SQL Server:在事务中回滚TRUNCATE操作
我们一般都认为TRUNCATE是一种不可回滚的操作,它会删除表中的所有数据以及重置Identity列. 如果你在事务中进行TRUNCATE操作,就能回滚.反之,它就不会从日志文件文件恢复数据.它不会在 ...
- 【练习】ViewPager标签滑动
效果图: 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:a ...
- 【word xml】将word转化为xml格式后，如何在xml中卫word添加分页符
1.首先在xml中找到我们需要添加分页符的位置 例如:我需要在这个第一部分上面添加一个分页符 2.找到这个[第一部分]这个位置之后,开始往上找,找到对应的位置 3.在</w:pPr>下方添 ...