关于css:好用的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 变动的应用