html中div过度约束,CSS3——过渡（transition）

一、概述

CSS属性的值从一个值变成另一个值的过程叫做渐变，重点突出变化的过程。CSS3 transition系列属性可控制这个变化过程，使得属性值变化过程更加平滑。一个过渡应包含这几个属性：

A：哪些属性需要过渡？

需要过度的CSS属性(也就指定旧值和新值)

B：过渡多久完成？

持续时间，即从旧值变成新值的过程持续的时间。这个时间不包含延迟时间。

C：过渡中间值如何计算？

随着时间的推移，过渡过程中属性中间值计算方式。

D：多久后开始过度？

延迟多久开始过度，即从属性值改变到开始执行过渡的时间。

E：什么时候执行过渡？

当属性值发生变化时执行过渡。这个由浏览器控制，不需要作者控制。

综上所述如果把过渡作为一个类型的话，则： =

二、语法

CSS3通过tansition系列属性(transition-property, transition-duration, transition-timing-function, transition-delay，transition)控制过渡。

2.1 transition-property

2.1.1 介绍

用来指定哪些CSS属性应用过渡，多个属性用逗号隔开。

2.1.2 语法

transition-property: none | [, ]*

= all |

默认值：all

从语法中可以看到transition-property的取值要么是none要么是列表。两种值不同共存的，并且"inherit","initial"也不能和列表共存。

none：

表示任何属性都不应用过渡，并且none可以终止正在执行的过渡。

all：

表示所有可动画的属性都应用过渡。注意all关键字是一种特殊的，他是表示所有属性的简洁写法。所以他可以和其他属性名共存，但是最好不要这样做。

非all的：

属性的名称标识符。

2.1.3 用法

A：

transition-property: width;

transition-duration: 1s;

表示：with属性应用一个持续时间为1s的过渡，即

B：

transition-property: width, background-color;

transition-duration: 1s, 2s;

表示：

with属性应用一个持续时间为1s的过渡，即

background-color属性应用一个持续时间为2s的过渡，即

C：

transition-property: width, background-color, height;

transition-duration: 1s,2s;

表示：

with属性应用一个持续时间为1s的过渡，即

background-color属性应用一个持续时间为2s的过渡，即

height属性应用一个持续时间为1s的过渡，即

注意：

该例中并没有显示指定height属性过渡持续时间。如果transition-property属性指定值个数多于tansition-duration属性(transition-timing-function, transition-delay也是这样)指定的值个数，则会循环重复tansition-duration的值，即此例中transition-duration的值等价于：transition-duration: 1s, 2s, 1s。如果transition-duration的值指定的值个数多于transition-property属性指定值格式，则多于的被忽略。

D：

transition-property: width, heighttt, background-color;

transition-duration: 1s, 1.5s, 2s;

表示：

with属性应用一个持续时间为1s的过渡，即

heighttt属性(虽然该属性heighttt)应用一个持续时间为1.5s的过渡，即< heighttt, 1s, ease, 0s>

background-color属性应用一个持续时间为2s的过渡，即

注意：

该例中有个非法属性heighttt。tansition-property属性列表中包含非法属性或者非动画的属性也是会创建个过渡，同理也会占用tansition-duration指定的值列表的一个值。

E：

transition-property: width, all, background-color;

transition-duration: 2s, 5s, 0.5s;

表示：所有可动画的属性应用一个持续5s的过渡，即

注意：

该例中all和其他属性同存。all关键字会导致其他指定的属性被忽略，并且根据all的位置相应的确定过渡其他值。如该例中all在第二个位置，所以对应的持续时间是5s.

2.2 transition-duration

2.2.1 介绍

定义过渡的持续时间，即从过渡开始到过渡结束的时间。

2.2.2 语法

transition-duration: [, ]*

默认值：0s

2.2.3 用法

见2.1

2.3 transition-timing-function

2.3.1 介绍

指定过渡过程中属性中间值的计算方式。CSS3提供两种计算曲线：阶梯函数(stepping function), 三次贝兹曲线(cubic-beizer)。

1) 阶梯函数

阶梯函数由两部分构成(见W3C)：

步数：步数是通过一个整数指定，并且每步的时间长度一样(即把持续时间等分，并且输出值也是等分的)

什么时间改变值：指定在每步的什么时间点改变值，只支持两个时间点：每步的开始和每步的结束。

2) 三次贝兹曲线

CSS3提供的三次贝兹曲线由四个点构成(P0-P3)，其中P0(0，0)， P3(1,1)是固定的。作者只能控制p1,p2点的位置来控制贝兹曲线。

2.3.2 语法

transition-timing-function: [, ]*

= ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)

x1,y1, x2, y2 =

1)CSS3预定义了一些常用的阶梯函数和贝兹曲线，见W3C。

ease: 平滑(先加速(加速时间短)，后减速)

linear: 线性

ease-in: 加速

ease-out: 减速

ease-in-out: 先加速，后减速(加速、减速时间相等)

2)自定义的阶梯函数：steps([, [end| start]?])

通过steps函数可以自定义阶梯函数，参数1指定步数，参数2指定改变值的时间点。start表示在每步的开始改变值，end表示在每步的结束改变值。参数2是可选的，缺省时取值end。

3)自定义三次贝兹曲线：cublic-bezier(x1, y1, x2, y2)

通过cublic-bezier函数自定义三次贝兹曲线。指定p1, p2点位置(p0, p3是固定值)，其中x轴的取值范围只能是[0, 1]，而y轴的取值不受限制。更好了查看贝兹曲线效果参考http://cubic-bezier.com/

2.3.3 用法【High】

见参考Understanding CSS Timing Functions，里面列举了各种举例。

2.4 transition-delay

2.4.1 介绍

指定过渡延迟执行的时间，即从DOM元素CSS属性值发生变化(赋值个新目标值)到DOM元素开始执行过渡之间的时间。

2.4.2 语法

transition-delay: [, ]*

默认值：0s

延迟时间可以为负值，为负值时会立马执行过渡(就像没有延迟一样)，但是起始值是过渡执行一段时间(延迟时间的绝对值)时的值。换句话说，负值延迟时间X表示当属性值发生变化时延迟已经在X时间前完成了，并且已经执行过渡X时间了。实际用户看到的过渡时间比实际执行事件少了X事件。比如-2s，表示在属性值发生变化时已经执行过渡2s了，并且当前的属性的起始值应该是执行过渡2s时的值。

2.4.3 用法

A：

transition-property: width;

transition-duration: 1s;

transition-timing-function: linear;

transition-delay: .5s;

表示：

width属性应用一个持续1s, 延迟0.5s，时间函数为linear的过渡，

B:

transition-property: width;

transition-duration: 1s;

transition-timing-function: linear;

transition-delay: -.5s; /* 延迟时间为负值 */

表示：

width属性应用一个持续1s, 延迟-0.5s，时间函数为linear的过渡，，用户体验的过渡时间应该是0.5s.

2.4.5 Issues/Concern

A：负值延迟时间会影响实际过渡执行的时间。

2.5 transition

2.5.1 介绍

transition是其他transition-属性的简洁方式。

2.5.2 语法

transition: [, ]*

= [ none | ] || || ||

注意在tansition属性中有两个类型的值(持续时间，延迟时间)，规定前面的时间是持续时间，后面的表示延迟时间。

2.5.3 用法

A：

transition: none;

表示：所有属性都不应用过渡，等价于transition-property: none;

B：

transition: width 2s

表示： width属性应用一个持续2s的过渡，即

三、过渡的开始【？】

当一个可动画的属性的计算值发生变化时，浏览器就根据tansition系列属性的值决定给该属性应用什么样的过渡。

3.1 过渡过程中属性值发生变化

3.1.1：tansition系列属性值发生变化：

过渡过程中tansition属性发生变化并不会影响本次过渡，除了tansition-property的none取值(会终止当前过渡)

3.1.2：应用过渡的属性发生变化：

终止当前过渡，并根据新的值应用一个新的过渡。

注意：

DOM元素CSS属性真实值是随着渐变过程动态变化的，渐变过程中获取元素的属性值：是当时渐变中的值(处于旧值和新值直接的一个值)。

在插入元素(如 .appendChild())或改变属性display: none后立即使用过渡, 元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 window.setTimeout() 延迟几毫秒。

四、过渡事件

4.1 介绍

过渡完成后会触发TransitionEvent事件。过渡取消不会触发该事件。

var transitionProperty = (function() {

var t,

el = document.createElement('surface'),

transitions = {

'transition': {

eventName: 'transitionend',

cssName: 'transition'

},

'OTransition': {

eventName: 'oTransitionEnd',

cssName: '-o-transition'

},

'MozTransition': {

eventName: 'transitionend',

cssName: '-moz-transition'

},

'WebkitTransition': {

eventName: 'webkitTransitionEnd',

cssName: '-webkit-transition'

}

}

for(t in transitions){

if( el.style[t] !== undefined ){

return transitions[t];

}

}

})()

五、可动画属性

哪些属性可以应用transition：只能是可动画的CSS属性可以应用。

六、兼容性

参考