transition 過渡

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

1. 官方定義

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

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

2. 慕課解釋

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

3. 語法

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

屬性值說明：

4. 兼容性

5. 實例

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

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

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

效果圖：

2. 當(dāng)鼠標移動上去改變元素的寬高值，讓它們都實現(xiàn)過渡動畫。

寫法一：

.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;
}

效果圖：

說明：這兩種方式都可以實現(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 第三個值使用了動畫函數(shù)，改變了過渡過程中完成的速度，我們可以很清楚的看到他們的變化速度。

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

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

效果圖：

說明：我們可以看到鼠標放到元素上 1s 之后開始動畫，而離開元素之后 1s 之后開始動畫。

6. Tips

通過上面的實例可以知道 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ū)動過渡的屬性，這會使得瀏覽器卡頓。
2. 盡量不要使用 margin-left 這類的屬性，很可能會打亂頁面元素的位置。
3. 推薦使用 transform 來改變元素的位置和大小。