transition 過渡

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

1. 官方定義

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

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

2. 慕課解釋

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

3. 語法

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

屬性值說明：

4. 兼容性

5. 實(shí)例

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

<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)過渡動(dòng)畫。

寫法一：

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

寫法二：

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

效果圖：

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

3. 改變上面過渡完成的速度。

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

效果圖：

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

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

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

效果圖：

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

6. Tips

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