CSS-transition

# 一、概述
CSS属性的值从一个值变成另一个值的过程叫做渐变，重点突出变化的过程。CSS3 transition系列属性可控制这个变化过程，使得属性值变化过程更加平滑。一个过渡应包含这几个属性：

A：哪些属性需要过渡？
    需要过度的CSS属性（也就指定旧值和新值）
B：过渡多久完成？
    持续时间，即从旧值变成新值的过程持续的时间。这个时间不包含延迟时间。
C：过渡中间值如何计算？
    随着时间的推移，过渡过程中属性中间值计算方式。
D：多久后开始过度？
    延迟多久开始过度，即从属性值改变到开始执行过渡的时间。
E：什么时候执行过渡？
    当属性值发生变化时执行过渡。这个由浏览器控制，不需要作者控制。

综上所述如果把过渡作为一个类型的话，则：<过渡> = <property-list, duration, timing-function, delay>
# 二、语法
CSS3通过tansition系列属性（transition-property, transition-duration, transition-timing-function, transition-delay，transition）控制过渡。
## 2.1 transition-property

### 2.1.1 介绍

用来指定哪些CSS属性应用过渡，多个属性用逗号隔开。
### 2.1.2 语法
```css
transition-property: none | <single-transition-property> [, <single-transition-property>]*
<single-transition-property> = all | <ident>
默认值：all
```
从语法中可以看到transition-property的取值要么是none要么是<single-transition-property>列表。两种值不同共存的，并且"inherit","initial"也不能和<single-transition-property>列表共存。
none：
    表示任何属性都不应用过渡，并且none可以终止正在执行的过渡。
all：
    表示所有可动画的属性都应用过渡。注意all关键字是一种特殊的<single-transition-property>，他是表示所有属性的简洁写法。所以他可以和其他属性名共存，但是最好不要这样做。
非all的<single-transition-property>：
    属性的名称标识符。
### 2.1.3 用法
**A：**
```css
transition-property: width;
transition-duration: 1s;
```
表示：with属性应用一个持续时间为1s的过渡，即<width, 1s, ease, 0s>

**B：**
```css
transition-property: width, background-color;
transition-duration: 1s, 2s;
```
表示：
with属性应用一个持续时间为1s的过渡，即<width, 1s, ease, 0s>
background-color属性应用一个持续时间为2s的过渡，即<background-color, 2s, ease, 0s>

**C：**
```css
transition-property: width, background-color, height;
transition-duration: 1s,2s;
```
表示：
with属性应用一个持续时间为1s的过渡，即<width, 1s, ease, 0s>
background-color属性应用一个持续时间为2s的过渡，即<background-color, 2s, ease, 0s>
height属性应用一个持续时间为1s的过渡，即<height, 1s, ease, 0s>

**注意：**
该例中并没有显示指定height属性过渡持续时间。如果transition-property属性指定值个数多于tansition-duration属性（transition-timing-function, transition-delay也是这样）指定的值个数，则会循环重复tansition-duration的值，即此例中transition-duration的值等价于：transition-duration: 1s, 2s, 1s。如果transition-duration的值指定的值个数多于transition-property属性指定值格式，则多于的被忽略。
**D：**
```
transition-property: width, heighttt, background-color;
transition-duration: 1s, 1.5s, 2s;
```
表示：
with属性应用一个持续时间为1s的过渡，即<width, 1s, ease, 0s>
heighttt属性（虽然该属性heighttt）应用一个持续时间为1.5s的过渡，即< heighttt, 1s, ease, 0s>
background-color属性应用一个持续时间为2s的过渡，即<background-color, 2s, ease, 0s>
**注意：**
该例中有个非法属性heighttt。tansition-property属性列表中包含非法属性或者非动画的属性也是会创建个过渡，同理也会占用tansition-duration指定的值列表的一个值。
**E：**
```
transition-property: width, all, background-color;
transition-duration: 2s, 5s, 0.5s;
```
表示：所有可动画的属性应用一个持续5s的过渡，即<all, 5s, ease, 0s>
**注意：**
该例中all和其他属性同存。all关键字会导致其他指定的属性被忽略，并且根据all的位置相应的确定过渡其他值。如该例中all在第二个位置，所以对应的持续时间是5s.
## 2.2 transition-duration
### 2.2.1 介绍

定义过渡的持续时间，即从过渡开始到过渡结束的时间。
### 2.2.2 语法
```css
transition-duration: <time> [, <time>]*
默认值：0s
```
### 2.2.3 用法
见2.1
## 2.3 transition-timing-function
### 2.3.1 介绍
指定过渡过程中属性中间值的计算方式。CSS3提供两种计算曲线：阶梯函数（stepping function), 三次贝兹曲线（cubic-beizer）。
#### 1) 阶梯函数

阶梯函数由两部分构成（见W3C）：
步数：步数是通过一个整数指定，并且每步的时间长度一样（即把持续时间等分，并且输出值也是等分的）
什么时间改变值：指定在每步的什么时间点改变值，只支持两个时间点：每步的开始和每步的结束。
#### 2) 三次贝兹曲线
CSS3提供的三次贝兹曲线由四个点构成（P0-P3)，其中P0（0，0）， P3(1,1)是固定的。作者只能控制p1,p2点的位置来控制贝兹曲线。
### 2.3.2 语法
```css
transition-timing-function: <single-transition-timing-function>[, <single-transition-timing-function>]*
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)
x1,y1, x2, y2 = <number>
```
#### 1）CSS3预定义了一些常用的阶梯函数和贝兹曲线，见W3C。

ease: 平滑（先加速（加速时间短），后减速）
linear: 线性
ease-in: 加速
ease-out: 减速
ease-in-out: 先加速，后减速（加速、减速时间相等）
#### 2）自定义的阶梯函数：steps(<integer>[, [end| start]?])

通过steps函数可以自定义阶梯函数，参数1指定步数，参数2指定改变值的时间点。start表示在每步的开始改变值，end表示在每步的结束改变值。参数2是可选的，缺省时取值end。
#### 3）自定义三次贝兹曲线：cublic-bezier(x1, y1, x2, y2)

通过cublic-bezier函数自定义三次贝兹曲线。指定p1, p2点位置（p0, p3是固定值），其中x轴的取值范围只能是[0, 1]，而y轴的取值不受限制。更好了查看贝兹曲线效果参考http://cubic-bezier.com/
### 2.3.3 用法【High】
见参考Understanding CSS Timing Functions，里面列举了各种举例。

## 2.4 transition-delay

### 2.4.1 介绍

指定过渡延迟执行的时间，即从DOM元素CSS属性值发生变化（赋值个新目标值）到DOM元素开始执行过渡之间的时间。

### 2.4.2 语法
```
transition-delay: <time>[, <time>]*
默认值：0s
```
延迟时间可以为负值，为负值时会立马执行过渡（就像没有延迟一样），但是起始值是过渡执行一段时间（延迟时间的绝对值）时的值。换句话说，负值延迟时间X表示当属性值发生变化时延迟已经在X时间前完成了，并且已经执行过渡X时间了。实际用户看到的过渡时间比实际执行事件少了X事件。比如-2s，表示在属性值发生变化时已经执行过渡2s了，并且当前的属性的起始值应该是执行过渡2s时的值。
### 2.4.3 用法
A：
```
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: .5s;
```
表示：
width属性应用一个持续1s, 延迟0.5s，时间函数为linear的过渡，<width,1s, linear, 0.5s>
B:
```
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: -.5s; /* 延迟时间为负值 */
```
表示：
width属性应用一个持续1s, 延迟-0.5s，时间函数为linear的过渡，<width,1s, linear, -0.5s>，用户体验的过渡时间应该是0.5s.
### 2.4.5 Issues/Concern
A：负值延迟时间会影响实际过渡执行的时间。

## 2.5 transition

### 2.5.1 介绍

transition是其他transition-属性的简洁方式。
### 2.5.2 语法
```
transition: <single-transition>[, <single-transition>]*
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>
```
注意在tansition属性中有两个<time>类型的值（持续时间，延迟时间），规定前面的时间是持续时间，后面的表示延迟时间。

### 2.5.3 用法

A：
```
transition: none; 
```
表示：所有属性都不应用过渡，等价于transition-property: none;
B：
```
transition: width 2s
```
表示： width属性应用一个持续2s的过渡，即<width, 2s, ease, 0s>

# 三、过渡的开始【？】
当一个可动画的属性的计算值发生变化时，浏览器就根据tansition系列属性的值决定给该属性应用什么样的过渡。

## 3.1 过渡过程中属性值发生变化

### 3.1.1：tansition系列属性值发生变化：

过渡过程中tansition属性发生变化并不会影响本次过渡，除了tansition-property的none取值（会终止当前过渡）
### 3.1.2：应用过渡的属性发生变化：
终止当前过渡，并根据新的值应用一个新的过渡。

## 注意：
1. DOM元素CSS属性真实值是随着渐变过程动态变化的，渐变过程中获取元素的属性值：是当时渐变中的值（处于旧值和新值直接的一个值）。
2. 在插入元素（如 .appendChild()）或改变属性`display: none`后立即使用过渡, 元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 window.setTimeout() 延迟几毫秒。

# 四、过渡事件
##4.1 介绍

过渡完成后会触发TransitionEvent事件。过渡取消不会触发该事件。
```javascript
var transitionProperty = (function() {
            var t,
                el = document.createElement('surface'),
                transitions = {
                    'transition': {
                        eventName: 'transitionend',
                        cssName: 'transition'
                    },
                    'OTransition': {
                        eventName: 'oTransitionEnd',
                        cssName: '-o-transition'
                    },
                    'MozTransition': {
                        eventName: 'transitionend',
                        cssName: '-moz-transition'
                    },
                    'WebkitTransition': {
                        eventName: 'webkitTransitionEnd',
                        cssName: '-webkit-transition'
                    }
                }

            for(t in transitions){
                if( el.style[t] !== undefined ){
                    return transitions[t];
                }
            }
        })()
```

# 五、可动画属性
哪些属性可以应用transition：只能是可动画的CSS属性可以应用。

# 六、兼容性
见：
http://caniuse.com/#search=transition
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

# 参考
1. [W3C](https://www.w3.org/TR/css3-transitions/#transition-timing-function_tag)
2. [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
3. [W3C+](http://www.w3cplus.com/content/css3-transition)
4. [cubic-beizer详解](http://www.candoudou.com/archives/590)
5. [Understanding CSS Timing Functions【High】](https://www.smashingmagazine.com/2014/04/understanding-css-timing-functions/)
【工具】
6. [缓动函数（更直观的查看过渡动画）](http://easings.net/zh-cn)
7. [在线绘制贝兹曲线【High】](http://cubic-bezier.com/)
8. [CSS3 animation属性中的steps功能符深入介绍](https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/)

CSS-transition #134

Description

一、概述

二、语法

2.1 transition-property

2.1.1 介绍

2.1.2 语法

2.1.3 用法

2.2 transition-duration

2.2.1 介绍

2.2.2 语法

2.2.3 用法

2.3 transition-timing-function

2.3.1 介绍

1) 阶梯函数

2) 三次贝兹曲线

2.3.2 语法

1）CSS3预定义了一些常用的阶梯函数和贝兹曲线，见W3C。

2）自定义的阶梯函数：steps([, [end| start]?])

3）自定义三次贝兹曲线：cublic-bezier(x1, y1, x2, y2)

2.3.3 用法【High】

2.4 transition-delay

2.4.1 介绍

2.4.2 语法

2.4.3 用法

2.4.5 Issues/Concern

2.5 transition

2.5.1 介绍

2.5.2 语法

2.5.3 用法

三、过渡的开始【？】

3.1 过渡过程中属性值发生变化

3.1.1：tansition系列属性值发生变化：

3.1.2：应用过渡的属性发生变化：

注意：

四、过渡事件

五、可动画属性

六、兼容性

参考

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions