在前面，我们已经讲解了transform这个属性以及案例，那么本文会进一步结合transform和transition两个属性，并制作一个简单的案例进行说明。

一、transition属性说明

接下来简单分析一下transition这个属性的定义以及子属性。

1)ansition-property  要运动的样式  (all || [attr] || none)

2)transition-duration 运动时间

3)transition-delay 延迟时间

4)transition-timing-function 运动形式

ease：(逐渐变慢)默认值

linear：(匀速)

ease-in：(加速)

ease-out：(减速)

ease-in-out：(先加速后减速)

cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 ) http://matthewlein.com/ceaser/

[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法。

看一个简单的例子：

当鼠标经过div时，实现该div的颜色改变，以及高度和宽度都改变的效果。

实现代码：

transition

.box{

width:100px;

height:100px;

background-color: blue;

transition-duration: 2s;

/* 以下三值为默认值，稍后会详细介绍 */

transition-property: all;

transition-timing-function: ease;

transition-delay: 0s;

}

.box:hover{

width:200px;

height:200px;

background-color: red;

}

过渡transition的这四个子属性只有是必需值且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个是；当只有一个时间时，它是，而为默认值0。

transition: || || ||

transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。

二、案例：扇形导航

实现代码：

扇形导航

html{

height:100%;

overflow:hidden;

}

body{

background:#f9f9f9;

}

#menu{

width:50px;

height:50px;

position:fixed;

right:20px;

bottom:20px;

}

#menu_list{

height:42px;

width:42px;

position:relative;

margin:4px;

}

#menu_list img{

border-radius:21px;

position:absolute;

left:0;

top:0;

}

#home{

width:50px;

height:50px;

background:url("images/home.png") no-repeat;

border-radius:25px;

position:absolute;

left:0;

top:0;

transition: 0.3s;

}

window.οnlοad= function () {

var oHome = document.getElementById("home");

var aImg = document.getElementById("menu_list").getElementsByTagName("img");

var iRadius=-150;

var onOff = true;

for(var i = 0; i< aImg.length;i++){

aImg[i].οnclick= function () {

this.style.transition="0.3s";

this.style.WebkitTransform="scale(2) rotate(-720deg)";

this.style.opacity=0.1;

addEnd(this,end);

};

};

function end(){

this.style.transition="0.1s";

this.style.WebkitTransform="scale(1) rotate(-720deg)";

this.style.opacity=1;

removeEnd(this,end);

};

oHome.οnclick=function(){

if (onOff){

this.style.webkitTransform="rotate(-360deg)";

for(var i = 0; i< aImg.length; i ++){

var oLt = getTL(iRadius,90/4*i);

aImg[i].style.transition="0.5s+"+i*100+"ms";

aImg[i].style.left = oLt.oLeft+"px";

aImg[i].style.top = oLt.oTop+"px";

aImg[i].style.webkitTransform="scale(1) rotate(-720deg)";

}

}else{

this.style.webkitTransform="rotate(360deg)";

for(var i = 0; i< aImg.length; i ++){

aImg[i].style.transition="0.5s+"+(aImg.length-i+1)*100+"ms";

aImg[i].style.left = 0+"px";

aImg[i].style.top = 0+"px";

aImg[i].style.webkitTransform="scale(1) rotate(0deg)";

}

}

onOff=!onOff;

};

function getTL(iRadius,iDeg){

var oLeft = Math.round(Math.sin(iDeg/180*Math.PI)*iRadius);

var oTop = Math.round(Math.cos(iDeg/180*Math.PI)*iRadius);

return {oLeft:oLeft,oTop:oTop};

};

function addEnd(obj,fn){

obj.addEventListener("WebkitTransitionEnd",fn,false);

obj.addEventListener("transitionend",fn,false);

};

function removeEnd(obj,fn){

obj.removeEventListener("WebkitTransitionEnd",fn,false);

obj.removeEventListener("transitionend",fn,false);

};

};

案例说明：

1、案例中涉及两个点击事件，一个是点击主菜单时会进行旋转，并出现扇形导航，另外一个是点击扇形导航时会使导航图片变大。

(1)首先是点击主菜单：我们在点击主菜单的时候，图片会旋转，在这个中，我们使用了webkitTransform="rotate(-360deg)";这个属性就可以实现，在这个过程中要记得当鼠标反复点击后者点击结束后的事件效果。所以，我在其中设置了一个变量onOff进行判断，初始值为true，首先进行判断，如果为true就可旋转，相反的，为了达到更好的效果，这里设置了旋转360度，最后记得加上onOff=!onOff;，否则这个操作还是错误的，达不到我们想要的效果。

oHome.οnclick=function(){

if (onOff){

this.style.webkitTransform="rotate(-360deg)";

}else{

this.style.webkitTransform="rotate(360deg)";

}

onOff=!onOff;

};

(2)其次是出现扇形导航，在这里使用的就是transform属性，我们以主菜单为中心进行旋转，将其他的5个子菜单分别平均分布在扇形中。那么首先，我们是不是应该先来计算一下角度以及半径的关系。

至于sin和cos如何计算，以及边和角度如何计算这里就不详细说明。

附上我写的：

var oLeft = Math.round(Math.sin(iDeg/180*Math.PI)*iRadius);

var oTop = Math.round(Math.cos(iDeg/180*Math.PI)*iRadius);      round()函数是为了取整。

(3)最后是如何是点击图片的时候，让图片变大。为了实现这个效果，我采用了transform的scale()函数，

1)scale(X方向上的比率，Y方向上的比率)

使用scale()函数指定X方向与Y方向上的2D伸缩比率。可以省略第二个值，省略时与第一个值相同。

2)scaleX(x方向上的比率)

使用scaleX()函数指定X方向上的伸缩比率，这时Y与Z方向上的比率为1。

3)scaleY(Y方向上的比率)

使用scaleY()函数指定Y方向上的伸缩比率，这时X与Z方向上的比率为1。

4)scaleZ(Z方向上的比率)

当定义了一个3D变形时，使用scaleZ()函数指定Z方向上的伸缩比率。这时X与Y方向上的比率为1。

5)scale3d(X方向上的比率,Y方向上的比率,Z方向上的比率)

当定义了一个3D变形时，使用scaleZ()函数指定Z方向上的伸缩比率。这时X与Y方向上的比率为1。

注意：

默认值：none             使用对象：块元素和直列元素             值的继承：不继承

2、过渡完成事件

Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);

firefox: obj.addEventListener('transitionend',function(){},false);

当如果多使用一个样式属性，在每个动画执行的过程中webkitTransitionEnd事件的触发次数将多增加两次。也就是说webkitTransitionEnd事件将在元素的每个样式属性值发生改变之后触发一次。