CSS3过渡延迟总结

一般情况下CSS属性的变化是瞬时变化的，但是CSS过渡可以控制变化效果，让变化平滑发生。

但是并不是所有的CSS属性都有过渡效果，具有过渡效果的CSS属性有：支持动画的CSS属性

一般具有中间值的属性有过渡效果，比如：宽度，因为宽度属性值是数值类型，元素宽度从100px变化到300px，会有中间值100px~200px之间，因此具有过渡效果。而边框样式没有过渡效果，边框从solid到dotted没有中间值来进行变化，因此没有过渡效果。

1. 元素状态

假定元素在变化过程中有以下两种状态：

• 初始态

  当页面加载完成之后的样式状态。

• 变化态

  元素由初始状态变化后的状态。

2. 过渡实现

注意：哪个元素需要过渡变化，就将过渡属性设置在哪个元素上。

当元素只需要对某个属性进行过渡效果设置，其他属性不需要设置的时候。则需要对指定属性进行设置。

2.1 设置哪些属性应用过渡效果

transition-property可以设置哪些属性可以应用过渡效果。

• 默认为all即所有属性都发生过渡效果
• none所有属性都不发生过渡效果
• 多个属性值采用逗号隔开

transition-property: background-color;

此时只对元素的背景颜色进行过渡效果应用，结果为：

可以看出，由于只有背景颜色应用了过渡效果，此时可以看出宽度/高度没有过渡产生，从而显得很生硬。

2.2 js过渡完成事件监听API

JS提供了一个动画API接口transitionend，用于控制过渡结束之后执行的JS事件。也即设置了过渡效果的属性当过渡效果完成之后，会触发transitionend事件，所以对于简写属性，则会触发多次，比如：border-radius会触发四次，原因：boder-top/right/bottom/left四个属性独立设置过渡，就会会四次事件。

transitioned事件被触发会得到一个事件触发对象，该对象里面包含了以下属性：

属性	说明
propertyName	由transition-property设置可应用过渡的属性中当前过渡完成的属性
elapsedTime	过渡花费的时间
pseudoElement	过渡的伪元素
isTrusted	true:用户触发，false:脚本触发

比如：

<main>
    <div>1</div>
</main>

<style>
div {
    width: 100px;
    height: 100px;
    background: #48dbfb;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 2s;
    position: relative;
}

main:hover div {
    // 高度/宽度变化
    width: 200px;
    height: 200px;
    background-color: #999999;
}

main div::after {
    content: "Cheng";
    position: absolute;
    bottom: -100px;
    color: #fab1a0;
    transform: translateX(-999px);
    transition: 2s;
}

main.move {
    transform: translate(0px);
}
</style>

<script>
    // 监听div盒子某些属性过渡完成事件，当某些属性过渡完成就会触发这个事件。
    document.querySelector("div").addEventListener("transitionend",function (e) {
      console.log(e);
    })
</script>

由于此案例有三个属性值应用了过渡，分别是width height background-color，所以这些属性进行过渡变化的时候会触发三次监听事件，当属性回到原来状态的时候，又会触发三次监听事件，所以一共触发六次监听事件。

2.3 设置过渡时间

可以使用transition-duration设置过渡时间

单位为：

• ms

• s

• 1s = 1000ms

默认为0s，也即不产生过渡效果。

可以设置多个属性值

• 当为一个值的时候，transition-property设置的所有属性使用同样的时间

• 当属性值个数大于1，且小于transition-property设置的属性个数的时候，采用循环的方式，依次应用每个过渡时间于属性上。

  也即：

  transition-property: border-radius,width,height,background-color;

  transition-duration: 1s,200ms,2s;

  此时，第1~3个属性值分别使用对应位置的时间，而第四个属性值则再应用第一个时间。

• 当属性值大于transition-property设置的属性个数的时候，属性与时间一一对应即可，而多余的时间则不起作用。

案例：

transition-duration: 10s

可以看出元素从一个状态变化到另一个状态花费了10s的时间。

2.4 控制过渡效果的速度

可以使用transitio-timing-function控制过渡效果的速度。

在CSS中有两种过渡方式：平滑过渡和步进过渡。

不同于平滑过渡，步进过渡将过渡时间划分为指定步数，在不同步数下进行过渡设置。

2.4.1 平滑过渡

参数值：

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	开始慢，然后快，慢下来，结束时非常慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	开始慢，结束快（等于 cubic-bezier(0.42,0,1,1)）
ease-out	开始快，结束慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	中间快，两边慢（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值

如果内置属性值不能满足要求，则可以通过自定义属性值。

使用cubic-bezier来控制曲线速度，而该曲线为贝塞尔曲线，通过改变其形状达到控制元素速度。

参数为：cubic-bezier(x1,y1,x2,y2)其中通过设定两个点的坐标从而达到对贝塞尔曲线的绘制，具体可以通过[ https://cubic-bezier.com]( https://cubic-bezier.com)调试。

使用调试之后获得的值应用到页面中：

transition-timing-function: cubic-bezier(.1,.79,.15,-0.61);

页面展示效果和在调试中获得的效果一致。

2.4.2 步进过渡

使用steps属性函数/step-x属性值进行设定

选项	说明
steps(n,start)	设置n个时间点，在每个时间点开始就进行变化状态
steps(n,end)	设置n个时间点，每个时间点快结束时进行变化状态
step-start	等于steps(1,start)
step-end	等于steps(1,end)

transition-duration: 2s;
transition-timing-function: steps(5,end);

以上表示将时间划分为5份，然后在每一份时间点的结束时变化状态

也即出现以下效果：

可以看出将整个过程分为了5份，然后每份变化都是在每一份快结束的时候进行变化，这个效果可能不是太明显。接下来对整个过程当作1份看待，也即：

transition-duration: 2s;
transition-timing-function: steps(1,end);

可以看出，由于整个过程只有一份，且规定让其在该时间点结束时才开始变化，所以可以明显看到，等待2s之后，元素才开始变化。

2.5 设置过渡延迟时间

当需要过渡效果在一定时间之后才展示，则可以通过transition-delay设置过渡延迟事件。

属性值：

• s / ms

• 1s = 1000ms

使用方式与transition-duration一致

由于元素发生变化的时候，比如鼠标悬浮改变元素尺寸，此时在元素改变尺寸之前就移开鼠标，这个时候元素不会改变尺寸的。所以如果在设置的延迟之间之内取消事件，那么元素则不会改变尺寸。

假设元素设置了3s延迟，且设置鼠标悬浮改变元素尺寸事件

<main>
    <div>1</div>
</main>


<style>
div {
    width: 100px;
    height: 100px;
    background: #48dbfb;
    display: flex;
    justify-content: center;
    align-items: center;
    // 设置3s延迟
    transition-delay: 3s;
    transition-duration:2s;
    position: relative;
}

main:hover div {
    width: 200px;
    height: 200px;
    background-color: #999999;
}
</style>

可以看到3s之后元素开始过渡变化，最后鼠标悬浮时间小于3s就离开，发现元素并没有响应变化。

2.6 过渡组合写法

使用transition对transition-property transition-duration transition-timing-function transition-delay进行统一设置

• 必须设置transition-duration

• transition-delay放于transition-duraion后进行设置

• transition: [transition-property transition-timing-function] transition -duration [transition-delay]