在这一节中,我们带大家深入去了解一下transition属性。这一节涉及的技巧非常重要,都是精华中的精华,在其他书中你未必能看到,所以小伙伴们一定要认真理解和掌握。

一、transition-property取值为all

在之前的章节中,我们都是仅仅针对一个CSS属性来实现过渡效果。实际上,我们可以使用transition属性同时对多个CSS属性来实现过渡效果,请看下面的例子。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { display:inline-block; width:100px; height:100px; border-radius:0; background-color:lightskyblue; transition-property:border-radius,background-color; transition-duration:1s; transition-timing-function:linear; transition-delay: 0s; } div:hover { border-radius:50px; background-color:hotpink; } </style> </head> <body> <div></div> </body> </html>

默认情况下,预览效果如下图所示。

当鼠标移到元素上时,元素会慢慢过渡到图20-12所示的效果。

分析:

当鼠标移动到元素上时,会在1秒钟内同时对border-radius和background-color这两个属性产生过渡效果。

在实际开发中,当有多个CSS属性进行过渡效果时,我们很少使用transition-property:border-radius,background-color;这种方式,而是更倾向于直接定义transition-property属性取值为all就可以了。

当transition-property属性定义为all时,CSS3会自动判断哪些属性是作为过渡效果的属性,相对来说更加简单方便。

transition-property:border-radius,background-color; transition-duration:1s; transition-timing-function:linear; transition-delay: 0s;

上面这段代码可以等价于:

transition:all 1s linear 0s;

二、transition-delay的省略

由于transition-delay属性是一个可选属性,因此当transition-delay取值为0s时,这个参数可以省略。

transition:all 1s linear 0s;

也就是说,上面这句代码可以等价于:

transition:all 1s linear;

在实际开发中,大多数情况下我们都是使用这种省略形式。

三、transition属性的位置

凡是涉及CSS3过渡,我们都是结合:hover伪类来实现过渡效果的,语法形式大致如下:

element { //原始值 transition: all 1s linear } element:hover { //最终值 }

之前我们都是把transition: all 1s linear;写在普通状态内,而不是写放在悬浮状态(即:hover{})中。那么transition属性放在这两个地方究竟有什么不同呢? 先来看一个例子。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { display:inline-block; width:100px; height:100px; border-radius:0; background-color:lightskyblue; } div:hover { border-radius:50px; background-color:hotpink; /*transition属性放到:hover{}中*/ transition:all 0.5s linear; } </style> </head> <body> <div></div> </body> </html>

默认情况下,预览效果如下图所示。

当鼠标移到元素上时,元素会慢慢过渡到图20-14所示的效果。

分析:
我们尝试把transition属性分别写在“普通状态”和“悬浮状态”内,然后对比两种方式,就可以很直观地知道两者的不同了:移入时效果两者没有区别,但是如果把transition属性写在普通状态内的话,移出时会有过渡效果;如果把transition属性写在悬浮状态内的话,移出时没有过渡效果。

在实际开发中,我们应该根据实际需求来选择使用哪一种方式,而不是笼统地把transition属性写在普通状态。

此外,过渡效果可以说是CSS3中最重要的内容。因此在接下来的几节中,我们会列举大量实际开发案例,以帮助大家更好地消化和吸收,希望小伙伴们把每一个例子都琢磨透。