重新想，重新看——CSS3变形，过渡与动画③

Posted 2020-06-25 浮客

这一篇主要谈谈CSS3的过渡属性。

过渡属性被设计的十分通俗易懂，属性写法为transition，有四个子属性：

1. <transition-property> 表示需要过渡的属性【必须】（本质上，transition对元素的该属性上加了一个监听器，一旦发现属性值变动，则开启‘过渡‘开关，令该属性的值开始过渡。）其下的值有以下三种类型：
   1. none 
   2. all 表示该元素所有可过渡属性均监听；
   3. <single-transition-property> 所需监听的单个属性（如需监听多个属性则需使用逗号隔开）；
2. <transition-duration> 表示整个过渡所需要的时间【必须】，以s(秒)为单位。
3. <transition-timing-function> 该子属性决定了元素过渡时的变化速率，通常常用的值有以下几种:
   1. ease 默认值，又快到慢，逐渐变慢；
   2. linear 匀速；
   3. ease-in 速度逐渐加快（加速效果/渐显效果）；
   4. ease-out 速度逐渐减慢（减速效果/渐隐效果）；
   5. ease-in-out 速度先加速再减速。
4. <transition-delay> 决定了过渡属性的延迟时间，必须放在第二个子属性之后。

当然，css3提供了transition的简写的方式，例如：transition：background 1s；便是常用的方式之一。

接下来谈谈transition的触发方式，正如之前提到的“监听器”的思想，我们实际上讨论的是能够改变元素CSS属性值的几种方式：

1. 使用伪类通过:hover等伪类在事件满足的一瞬间触发渐变；
2. 媒体查询触发  根据@media的方式触发；
3. Javascript触发    直接改变CSS值，添加class标签等。

以上基本上讲清了过渡属性的用法与原理，但是这还远远不足够，过渡属性还留下了以下三个问题，我们逐一详谈：

1. 浏览器支持：过渡属性目前IE浏览器支持程度并不是很好， IE10以下均不支持该属性。其他浏览器的最新版本都无需添加浏览器私有属性；
2. 可过渡属性：并不是所有的元素属性都可以使用CSS3过渡属性进行过渡（例如颜色属性），关于什么属性能够过渡可以参照W3C官网；
3. 其他实际的问题：例如如何使用JS操控过渡属性？过渡属性的优先级问题，隐式过渡等等，这些都在将来实际遇到时回来补充。