04_css3过渡

transition

众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。

CSS transition 提供了一种在更改CSS属性时控制动画速度的方法。 
其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。

比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，
使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。
这个过程可以自定义。

简写属性transition:
	transition是一个简写属性，用于
		transition-property,
		transition-duration,
		transition-timing-function,
		transition-delay
		
CSS 过渡由简写属性 transition 定义是最好的方式，
可以避免属性值列表长度不一，节省调试时间

默认值：
    transition-delay: 0s
    transition-duration: 0s
    transition-property: all
    transition-timing-function: ease
 
注意:
在transition属性中，各个值的书写顺序是很重要的：
	第一个可以解析为时间的值会被赋值给transition-duration，
	第二个可以解析为时间的值会被赋值给transition-delay
 
推荐抒写顺序:
过渡时间  过渡样式  过渡形式  延迟时间 [，过渡时间  过渡样式  过渡形式  延迟时间]

兼容性
transition 可以不用厂商前缀，不过鉴于标准刚刚稳定，
对于基于 Webkit的浏览器仍然需要厂商前缀。
如果想兼容旧版本的浏览器那么也需要厂商前缀
（例如Firefox 15 及之前版本, Opera 12 及之前版本)

transition-property

可被动画的属性,
指定应用过渡属性的名称

默认值为 all，表示所有可被动画的属性都表现出过渡动画。

可被动画的属性查询：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties

可以指定多个 property 

属性值：
	none
		没有过渡动画。
	all
		所有可被动画的属性都表现出过渡动画。
	IDENT
		属性名称 （可以指定多个）

transition-duration：

过渡时间,属性以秒或毫秒为单位指定过渡动画所需的时间。

默认值为 0s ，表示不出现过渡动画。
 
可以指定多个时长，每个时长会被应用到由 transition-property 指定的对应属性上。
如果指定的时长个数小于属性个数，那么时长列表会重复。
如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。

属性值
	以毫秒或秒为单位的数值<time>类型。
	表示过渡属性从旧的值转变到新的值所需要的时间。
    如果时长是 0s，表示不会呈现过渡动画，属性会瞬间完成转变。
不接受负值。一定要加单位(不能写0 一定要写0s  1s,0s,1s)！

transition-delay：

transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。

默认值：0s 
 
你可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性。
如果指定的时长个数小于属性个数，那么时长列表会重复。
如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变

属性值
	值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。
	取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

transition-timing-function：

受到 transition的影响，会产生不断变化的中间值，
而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。

实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，
变化速度可以不断改变

默认值：ease（先加速然后减速）
 
你可以规定多个timing function,通过使用 transition-property属性，
可以根据主列表(transition property的列表)给每个CSS属性应用相应的
timing function.

如果timing function的个数比主列表中数量少，
缺少的值被设置为初始值（ease） 。

如果timing function比主列表要多，
timing function函数列表会被截断至合适的大小。这两种情况下声明的CSS属性都是有效的。

属性值：
	1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
	2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
	3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
	4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
	5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
	6、cubic-bezier： 贝塞尔曲线
	7、step-start：等同于steps(1,start)
		 step-end：等同于steps(1,end)
		 steps(<integer>,[,[start|end]]?)
				第一个参数：必须为正整数，指定函数的步数
				第二个参数：指定每一步的值发生变化的时间点（默认值end）

当属性值的列表长度不一致时

transition-property: background,width,height;
transition-duration: 3s,2s;
transition-delay:3s,2s;
transition-timing-function:linear;
 
 
transition-property: background,width,height;
transition-duration: 3s,2s,3s;
transition-delay:3s,2s,3s;
transition-timing-function:linear,ease,ease;

超出的情况下是会被全部截掉
不够的时候，关于时间的会重复列表，
transition-timing-function的时候使用的是默认值ease

检测过渡是否完成

当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend

在 WebKit 下是 webkitTransitionEnd
（每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件）
 
在transition完成前设置 display: none，事件同样不会被触发

补充

a. 过渡只关系元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态
b. 元素在初次渲染还没有结束的时候，是没有办法触发过渡的
c. 在绝大部分变换样式的切换时，变换组合的个数或位置不一样时，是没有办法触发过渡的