好用的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變化的使用