最近一直在系统的复习前端基础知识， 不复习的时候不知道 一旦系统的复习才知道 原来自己对很多知识还是处于一知半解的地步，好吧 话不多说 开始写吧：
一、 过渡
1.1、 过渡是什么？
首先关于过渡，过渡是一个什么东西呢？我感觉用语言来描述是很苍白的，我们直接来看下面一段代码：
// css
.test {
width: 200px;
height: 200px;
background-color: red;
}
.test:hover {
height: 400px;
}
// html
<div class="test"></div>
代码的意思是在鼠标放在元素上面的时候，就会改变元素的高度，具体的效果如下：
我们发现：在鼠标hover的时候，元素一瞬间高度变化，紧接着我们在其基础上面增加过渡的代码：
transition: height 2s;
效果如下：
从上面的效果，我们可以看出来没加过渡和加过渡的之后的效果差距，过渡效果就像在变换的过程中增加缓冲效果，也就是说过渡就是元素从一种样式逐渐改变为另一种的效果。
1.2、 介绍过渡可选用的属性
那么关于过渡，需要掌握的知识点有哪些呢？
- transition 简写属性，用于在一个属性中设置四个过渡属性，依次是下面几个元素
- transition-property 规定应用过渡的 CSS 属性的名称。
- transition-duration 定义过渡效果花费的时间。默认是 0。
- transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"
- transition-delay 规定过渡效果何时开始。默认是 0
1.3、 transition-property
transition-property属性规定应用过渡效果的css属性的名称，当指定css属性值发生改变的时候，过渡效果将会触发。
其可选值是：
- none：没有属性会触发过渡效果
- all：所有的属性变化都会触发过渡效果
- property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
1.4、 transition-duration
transition-duration属性规定完成过渡效果需要花费的时间。默认值是0.
1.5、 transition-timing-function
transition-timing-function属性规定过渡效果的速度曲线。其可选值有：
- 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 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
这里值得我们注意的是：最后一个速度的值可以在赛贝尔曲线官网上自行选取。
1.6、transition-delay
transition-delay 属性规定过渡效果何时开始。通俗点说就是设置变换的延时时间。
1.7、 来搞个例子吧
说了这么概念性的问题，接下来看一段代码：
// css
.runn-area{
background: skyblue;
padding: 2px 4px
}
.runn-area:hover>.test{
transform: translateX(80px);
}
.runn-area:hover>.test3{
transform: translate(80px,0) rotate(360deg);
}
.test {
width: 12px;
height: 12px;
background-color: red;
transition: height 2s;
margin-top: 10px;
color:white;
font-size: 12px
}
.test1 {
transition-property: transform;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0.5s;
}
.test2 {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 0.5s;
}
.test3 {
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 0.5s;
}
.test4 {
transition-property: transform;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0,.67,.87,.06);
transition-delay: 0.5s;
}
.test5 {
transition-property: transform;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-delay: 0.5s;
}
// html
<div class="runn-area">
<div class="test1 test"></div>
<div class="test2 test"></div>
<div class="test3 test"></div>
<div class="test4 test"></div>
<div class="test5 test"></div>
</div>
效果如下：
上面我们分别用了不同的transition-property给大家一个不一样的速度感受，能让大家更好的去理解transition-property这个属性。值得我们注意的是：test2元素并没有过渡效果，这里我们发现指定的width，而元素产生的变化确实做的平移变换，所以没有了效果。test3既有平移效果，也有旋转效果，如果想有多种效果的话，用空格做分隔，只要transition-property支持该属性就能被触发。
二、 2d变换基础方法
前面在我们的过渡中用到了一个平移的方法，那么我们肯定不能只满足于平移，肯定还想知道更多平面上的变换动画。
2.1、 2d平面基础中有哪些办法：
关于平面2d变换中 主要有一下几个方法：
- translate：平移
- scale： 缩放
- rotate：旋转
- skew： 倾斜
2.1、 translate
首先关于关于translate这个方法而言，本身就有两个子方法：
- translateX 这个方法只有一个参数，表示沿x轴的平移量
- translateY 这个方法也只有一个参数，表示沿y轴的平移量
而translate是上面两个方法的简写形式，可以接收两个参数，前者是x轴的平移量，后者是沿y轴的平移量。如果只传一个值，缺省值默认为0。具体的代码,前面代码、效果已经展示过了我就不多说了。
2.2、 scale
关于scale来说而言，本身也有两个子方法：
- scaleX：定义 2D 缩放转换，改变元素的宽度。
- scaleY：定义 2D 缩放转换，改变元素的高度。
而scale是上面两个方法的简写形式，可以接收两个参数，分别代表改变元素的宽度和高度。来看下面一个一段代码：
<div class="test"></div>
body:hover>.test{
transform: scale(4,4);
}
.test{
width: 100px;
height: 100px;
background-color: red;
transition: transform 2s
}
2.3、 rotate
rotate主要用来定义 2D 旋转，在参数中规定角度。修改一下上面的代码
body:hover>.test{
transform: rotate(360deg)
}
效果如下：
2.4、 skew
关于skew来说而言，本身也有两个子方法：
- skewX：定义 2D 倾斜转换，沿着 X 轴。
- skewY：定义 2D 倾斜转换，沿着 Y 轴。
而skew是上面两个方法的简写形式，可以接收两个参数，分别代表改变元素的沿着x,y轴的倾斜角度。修改一下上面的代码：
body:hover>.test{
transform: skew(60deg,60deg);
}
效果如下：
这里值得我们的注意的是沿着哪个轴倾斜，就是被倾斜边与坐标轴之间的夹脚的角度。
三、原点位置
我们这里有这样一个需求：就是在我们的旋转操作中，我们不希望从，从元素的中心点开始旋转，这就触发了我们接下来的一个属性：transform-origin。我们还是老样子，修改一下上面的的代码来演示这个属性的作用：
.test{
width: 40px;
height: 40px;
background-color: red;
transition: transform 2s;
transform-origin: 0 0;
}
.body:hover>.test{
transform: rotate(360deg);
background-color: white;
}
效果如下：
从上面的效果图我们可以发现，该属性是用来更改一个元素变形的原点。
该元素在平面上可以接收两个值，代表变换的中心点（用x-axis和y-axis来表示），其可选用的格式类型有：
x-axis:定义视图被置于 X 轴的何处。可能的值：
|left|center|right|length|%|默认值50%
y-axis:定义视图被置于 Y 轴的何处。可能的值：
|top|center|bottom|length|%|默认值50%
四、 矩阵变换（matrix）
最后我们来说一说矩阵变换吧，这是一个比较复杂的章节。
4.1、 矩阵变换的原理
首先matrix函数接收6个参数，我们就用a,b,c,f,e,f来指代，将这6个参数组合成矩阵如下：
其中矩阵变换的原理是：
x，y表示变换前元素某一点在局部坐标系中的横纵坐标。x'，y' 表示变换后的坐标。其转化的公式为：
x' = ax + cy + e
y' = bx + dy + f
通过上面的计算方法我们就能计算出a,b,c,d,c,e,f的值 然后填写进去就行了。
4.1、用矩阵变换实现平移变换
问题：我们想让基点为(10px,10px)的元素平移到（30px,30px）。
这里值得我们注意的点就是：让 a=1,b=0,c=0,d=1的情况下，e，f就相当于translate的两个参数。
经过计算 e=20,f=20。
4.2、用矩阵变换实现缩放变换
问题：我们想让元素的宽度成为原来的2倍，宽是原来的3倍？
同样值得我们注意的是：只要让 b = 0，c = 0，e = 0，f = 0，那么 a，d 就相当于scale()的两个参数
经过计算得到 a=2,d=3
4.2、用矩阵变换实现旋转变换
问题：我们想让元素旋转指定度数怎么做？
我们这里的计算公司相当于：
x' =x*cosθ - y*sinθ
y' = x*sinθ + y*cosθ
值得注意的一点是旋转度数的时候，直接将a = cosθ，b = sinθ，c = - sinθ ，d = cosθ， e = 0,，f = 0
这里值得我们深度深思的是，旋转360度 如何做呢？
4.2、用矩阵变换实现倾斜变换
这个的计算公式相当于
x’ = x + ytanθx
y’ = xtanθy + y
值得注意的一点是旋转度数的时候，直接将a = 1，b = tanθy，c = tanθx，d = 1， e = 0,，f = 0
4.3、总结
总的来说呢，关于矩阵变换的最佳记忆方式可以用下面的方式来记忆：
a 水平缩放，b 水平倾斜，c 垂直倾斜，d 垂直缩放，e 水平移动，f 垂直移动
说在最后
关于过渡和2d动画这一块，我觉得应该是每个前端工程师必须熟练使用的东西，怎么说呢？现在的app 要想使用户体验更加的友好 最好的方式就是给界面转换、数据加载加上一个缓冲页面 而不是干巴巴的纯数据展示，这样不仅对用户，而且对自己审美也是一种很好的享受。好了 好了，不多说了，终于写完了，都快12点半了，我先睡觉了
