transition 過(guò)渡

如果想做出細(xì)膩的過(guò)渡效果，那么這個(gè)屬性可能會(huì)滿(mǎn)足你的需求。這個(gè)屬性簡(jiǎn)單的來(lái)說(shuō)就是用來(lái)模擬需要變化的屬性，從開(kāi)始到結(jié)束數(shù)值之間的過(guò)渡。

1. 官方定義

transition 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置四個(gè)過(guò)渡屬性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

2. 慕課解釋

transition 用來(lái)設(shè)置一個(gè)屬性狀態(tài)從開(kāi)始到結(jié)束中間這個(gè)過(guò)程的變化。它是 transition-property、transition-duration、transition-timing-function、transition-delay、這四個(gè)屬性的縮寫(xiě)。它們分別代表了：要使用過(guò)度動(dòng)畫(huà)的屬性、過(guò)渡動(dòng)畫(huà)的時(shí)間、過(guò)渡動(dòng)畫(huà)的加速度函數(shù)即數(shù)值變化的快慢過(guò)程、過(guò)渡動(dòng)畫(huà)的延遲時(shí)間。而我們通常使用過(guò)渡屬性完成元素過(guò)渡的這個(gè)過(guò)程一般使用 transition 。

3. 語(yǔ)法

.demo{
    transition: property duration timing-function delay;
}

屬性值說(shuō)明：

4. 兼容性

5. 實(shí)例

1. 當(dāng)鼠標(biāo)移動(dòng)到元素上，使用過(guò)渡屬性來(lái)讓元素的高度變化，從而實(shí)現(xiàn)一個(gè)過(guò)渡效果。

<div class="demo"></div>

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: height 1s;
}
.demo:hover{
    height: 150px;
}

效果圖：

2. 當(dāng)鼠標(biāo)移動(dòng)上去改變?cè)氐膶捀咧担屗鼈兌紝?shí)現(xiàn)過(guò)渡動(dòng)畫(huà)。

寫(xiě)法一：

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: height 1s,width 1s;
}
.demo:hover{
    width: 150px;
    height: 150px;
}

寫(xiě)法二：

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: all 1s;
}
.demo:hover{
    width: 150px;
    height: 150px;
}

效果圖：

說(shuō)明：這兩種方式都可以實(shí)現(xiàn)我們所要的過(guò)渡方式。不過(guò)這里慕課推薦使用第一種方式。

3. 改變上面過(guò)渡完成的速度。

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: height 1s ease-in,width 1s ease-out;
}
.demo:hover{
    width: 150px;
    height: 150px;
}

效果圖：

說(shuō)明：在 transition 第三個(gè)值使用了動(dòng)畫(huà)函數(shù)，改變了過(guò)渡過(guò)程中完成的速度，我們可以很清楚的看到他們的變化速度。

4. 當(dāng)鼠標(biāo)移動(dòng)上去 1s 之后開(kāi)始動(dòng)畫(huà)。

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: height 1s ease-in 1s,width 1s ease-out 1s;
}
.demo:hover{
    width: 150px;
    height: 150px;
}

效果圖：

說(shuō)明：我們可以看到鼠標(biāo)放到元素上 1s 之后開(kāi)始動(dòng)畫(huà)，而離開(kāi)元素之后 1s 之后開(kāi)始動(dòng)畫(huà)。

6. Tips

通過(guò)上面的實(shí)例可以知道 transition 的屬性值配置很靈活，但是我們要遵循一定的規(guī)律，這不單是增加了代碼的可讀性，也符合瀏覽器解析規(guī)則的規(guī)律。

hover 到按鈕上改變按鈕的位置和背景顏色。

<button class="demo">慕課</button>

.demo{
    width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    background: #000;
    color:#fff;
    border:none;   
    transition: background .4s,transform .4s;
}
.demo:hover{
   background: red;
   transform: translateY(-5px);  
}

效果圖：

7. 小結(jié)

1. 盡量不要使用 all 來(lái)驅(qū)動(dòng)過(guò)渡的屬性，這會(huì)使得瀏覽器卡頓。
2. 盡量不要使用 margin-left 這類(lèi)的屬性，很可能會(huì)打亂頁(yè)面元素的位置。
3. 推薦使用 transform 來(lái)改變?cè)氐奈恢煤痛笮　?/li>