好用的css3特性-过渡和2D变换

 css3中有很多非常好用的特性，今天来总结一下与动画相关，包括过渡、2D变换。

首先来介绍一下过渡，过渡是在进行变化的时候进行的一个缓冲，如果没有过渡，当变更了元素的位置、大小的数据时，会一瞬间完成变化，增加了过渡之后，变化的过程会展现出来。比如以下gif，我们想要在鼠标移入盒子的时候，将盒子的宽和高增大一倍，并且更改颜色，没有过渡和过渡明显在用户体验上就不一样。

过渡的写法也简单，只需要在变化的基础上增加一个 transition 就行

transition: 过渡属性 过渡时间 过渡曲线 延迟时间
(1) 过渡属性，可以设置 宽度、高度、transform等，当有多个过渡效果时，可以用逗号隔开，或者用all来代表所有效果 (必写)
(2) 过渡时间，单位是s，表示花多久的时间达到变化后的效果 (必写)
(3) 过渡曲线，默认 ease，即逐渐慢，还有以下选项可以选择
    linear 匀速
    ease-in 加速
    ease-out 减速
    ease-in-out 先加速后减速
(4) 延迟时间，表示推迟多久执行过渡效果，默认0s，即不延迟，可以自定义

过渡曲线不是很好理解，这里演示一下 ease、ease-in、ease-out、ease-in-out的区别
 

了解完过渡的语法之后，如上图的过渡效果，就可以这样来定义，创建一个空的div标签，然后为它定义宽高背景色

.box {
   width: 100px;
   height: 100px;
   background-color: pink;     
   // 此处用来定义过渡, 默认的内容可以省略, 实际为 transition: all 1s ease 0s
   transition: all 1s;
}

.box:hover {
   width: 200px;
   height: 200px;
   background-color: skyblue
}

除了改变宽高，如果我们需要移动元素的位置，这时候该怎么做呢？有两种方式帮我们实现这一效果，以下示例1s后向分别在x和y轴移动100px方式一, 直接修改top/left的值

// css代码
.box {
   position: relative;
   top: 0;
   left: 0;
   background-color: pink;
   height: 100px;
   width: 100px;
   transition: all 1s; // 增加过渡, 使变化不那么突兀
}

// html代码
<div class="box"></div>

// js代码
const box = document.getElementsByClassName('box')[0]
setTimeout(()=>{
   box.style.left = "100px"
   box.style.top = "100px"
},1000)

方式二，通过css3提供的2D变换属性，transform，移动元素通过 translate来实现

// translate语法
transform: translate(x, y)
// 括号里的两个属性分别为x轴方向和y轴方向

// 只需要在x轴移动
transform: translateX(x轴移动的距离)

// 只需要在y轴移动 
transform: translateY(y轴移动的距离)

// 移动自身宽高的一半, 可以用来实现垂直水平居中
transform: translate(50%, 50%)

需要注意的是，x轴往右是正方向，y轴向下是正方向

上述需求的实现方法

// css代码
.box {
   transform: translate(0,0);
   background-color: pink;
   height: 100px;
   width: 100px;
   transition: all 1s; // 增加过渡, 使变化不那么突兀
}

// html代码
<div class="box"></div>

// js代码
const box = document.getElementsByClassName('box')[0]
setTimeout(()=>{
   box.style.transform = "translate(100px, 100px)"
},1000)

那既然原来就有可以进行移动的方法，为什么css3还新增一种移动方式，他们两个有什么不同呢？要了解他们之间的不同，就要先了解重绘重排的概念

按照以前通过绝对定位/相对定位的方式移动元素会造成浏览器的重绘和重排，而css3新增的transform只会重绘而不会重排，我们可以通过谷歌浏览器中的 preformance 来观察到这一差别。

浏览器进行布局和绘制都是需要一定的时间，大量的重绘重排会影响程序的性能，所以如果在没有兼容性要求的情况下，我们都可以通过translate来改变元素的位置。

那么translate可以应用到什么样的场景下呢，可以试想一下，在一些PC端电商项目中，鼠标移入某个商品，该商品就可能出现向上/下移动的动画，表示你的鼠标正移入到此处，如果鼠标移开，那么商品就恢复原来的位置。图示效果如下。

实现的代码结合transform进行移动和transition实现过渡效果即可。

img {
   margin: 100px;
   width: 200px;
   transition: transform .6s
}

img:hover {
   transform: translate(0, 50px);
}

transform还有两个好用的属性，分别是scale缩放和rotate旋转，先来说说scale缩放，如果没有缩放，我们想让一个元素变大2倍，可以直接更改元素的宽高，那缩放和直接修改宽高相比，除了和以上的translate一样不会造成重排，还有一点就是不需要设置为绝对定位，它也不会挤压其它元素，而且它会沿着自己的正中心进行缩放，这个缩放的中心位置也可以自行通过 transform-origin 来设置，区别见下图。

scale缩放的语法

transform: scale(x, y)
// x和y分别表示横轴和纵轴的缩放比例, 用数字表示, 比如0.8 1.2

transform: scale(rate)
// 只写一个, 表示纵轴与横轴的缩放比相同

scale可以用于哪些方面呢？比如我们需要对数据进行分页时，当鼠标移入哪个按钮，就进行放大展示，图示如下。
 

实现代码如下

// css
ul {
   display: flex;
}

li {
   list-style-type: none;
   width: 30px;
   height: 30px;
   line-height: 30px;
   border: 1px solid #000;
   border-radius: 50%;
   text-align: center;
   margin: 10px;
   cursor: pointer;
   transition: transform .1s;
}

li:hover {
   transform: scale(1.3)
}

// html
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

最后一个transform的属性是旋转，这也是一个非常好用的属性，语法如下

transform: rotate(deg)
// deg表示旋转度数

使用rotate可以模拟各个方向的箭头，当展开或者收起时，箭头的方向进行变化

实现代码如下

div {
   position: relative;
   border: 1px solid #000;
   width: 260px;
   height: 30px;
   margin: 100px auto;
}

div::after{
   position: absolute;
   top: 6px;
   right: 10px;
   display: block;
   content: "";
   width: 10px;
   height: 10px;
   border-right: 1px solid #000;
   border-bottom: 1px solid #000;
   transform: rotate(45deg);
   transition: all 1s;
}

div:hover::after{
   transform: rotate(225deg) translate(-6px, -4px); // transform属性可以累加使用
}

以上是过渡和2D变化的结合使用，下一篇文章总结动画和3D变化的使用