1.2 transition 简写属性

transition 过渡

在之前变形 transform 的学习过程中，我们知道在触发变形的阶段，会存在一个始态和一个终态。属性的新值替换旧值的持续时间是毫秒级的。受影响的内容在这短暂的时间内重新进行绘制，所以在我们视角看来，这段效果是一个瞬时间完成的。通过过渡效果，我们可以将这个阶段平滑得分配到一个时间段上。

1. 过渡

CSS 过渡能控制一段时间内属性的值如何变成另一个值，因此，我们可以让属性的值变化过程时间延长，让整个阶段看着更加自然，平滑。

1.1 过渡的基本属性

在CSS中，过渡使用4个属性进行定义：transition-property、transition-duration 、transition-timing-function 、transition-delay 。

• transition-property ：表示哪个属性需要过渡，比如修改了颜色，就可以写 color，更改了宽度，就可以写 width；如果是旋转、平移，那需要设置 transform 而不是rorate ；如果想针对所有属性进行过渡，那可以写 all；
• transition-duration ：表示过渡所需要的时间，单位为秒(s)，也可以使用毫秒(ms)；
• transition-timing-function ：表示过渡的方式，对于属性过渡的效果有不同的过渡方法，这主要体现在始态到终态过程中，不同阶段有着不同的运动速度；
  • linear：线性过渡；
  • ease：平滑过渡；
  • ease-in：由慢到快；
  • ease-out：由快到慢；
  • ease-in-out：由慢到快再到慢；
• transition-delay ：表示过渡到延迟时间，单位为秒(s)。

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>;

思考题

1. transition 和 display 冲突的问题

transition 过渡能控制一段时间内属性的值如何变成另外的值，但是通过 display 控制元素的隐藏显示时，过渡是不起效果的。这是因为 display: none 的时候，页面文档流已经不存在该元素了。 transition 属性无法对一个从无到有的元素进行过渡显示。display: none 它会触发页面的回流事件，而这个事件是一个异步延时事件，所以浏览器在解析过渡动画代码的后，再执行 display 的代码。所以要进行元素的显示隐藏过渡，可以使用透明度来实现。