在这一节中,我们带大家深入去了解一下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中最重要的内容。因此在接下来的几节中,我们会列举大量实际开发案例,以帮助大家更好地消化和吸收,希望小伙伴们把每一个例子都琢磨透。