你可能不知道的 transition 技巧與細節

CSS 中，transition 屬性用于指定為一個或多個 CSS 屬性添加過渡效果，

最為常見的用法，也就是給元素添加一個 transition，讓其某個屬性從狀態 A 變化到狀態 B 時，不再是非常直接突兀，而是帶有一個補間影片，

舉個例子：

<div></div>

div {
    width: 140px;
    height: 64px;
    transition: .8s transform linear;
}
div:hover {
    transform: translate(120px, 0);
}

當然，除了上述基本的用法，其實 CSS transition 還有一些非常有意思的細節和有趣的用法，下面讓我一一娓娓道來，

并非所有屬性都支持 transition

并非所有屬性都支持 transition，和 animation 類似，這里有一個串列，列出了所有支持 transition 的屬性 -- CSS animated properties

當然，有的時候，還有更例外的，某些支持 transition 的屬性在某些特定狀態下，也是不支持 transition 的，非常典型的就是 height: auto 和 width: auto，

在 CSS 奇技淫巧：動態高度過渡影片 一文中，提到了這樣一個場景：

元素的動態高度過渡影片失效，偽代碼大概是這樣：

{
    height: unset;
    transition: height 0.3s linear;

    &.up {
        height: 0;
    }
    &.down {
        height: unset;
    }
}

明明給 height 屬性設定了 transition，但是過渡影片沒有觸發，而是直接一步到位展開：

原因在于， CSS transtion 不支持元素的高度或者寬度為 auto 的變化，

對于這種場景，我們可以使用 max-height 進行 hack，

這里有一個非常有意思的小技巧，既然不支持 height: auto，那我們就另辟蹊徑，利用 max-height 的特性來做到動態高度的伸縮，譬如：

{
    max-height: 0;
    transition: max-height 0.3s linear;

    &.up {
        max-height: 0;
    }
    &.down {
        max-height: 1000px;
    }
}

具體的詳情你可以看看 -- CSS 奇技淫巧：動態高度過渡影片，

transition 可以精細化控制每一個屬性

繼續，在 transition 中，我們可以使用 transition: all 1s linear 這樣，統一給元素下面的所有支持過渡的屬性添加過渡效果（時間及緩動函式），

同時，我們也可以分別精細化控制每一個屬性：

{
    // 可以這樣
    transition: all 1s linear;

    // 也可以這樣
    transition: height 1s linear, transform 0.5s ease-in, color 2s ease-in-out;
}

并且，和影片類似，每一個過渡都是支持延遲觸發的：

div {
    // 延遲 1s 觸發過渡，過渡影片的時間為 0.8 秒
    transition: .8s transform 1s linear;
}
div:hover {
    transform: translate(120px, 0);
}

可以看到不管是過渡觸發，還是過渡復位，都會等待 1 秒再觸發，

利用這個技巧，我們就可以實作一些過渡效果的結合，首先我們實作這樣一個寬高變化的過渡影片：

<div></div>

div {
    position: relative;
    width: 200px;
    height: 64px;
    box-shadow: inset 0 0 0 3px #ddd;
}
div::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0; left: 0; width: 0; height: 0;
    box-sizing: border-box;
    transition: width .25s, height .25s, border-bottom-color;
    transition-delay: .25s, 0s, .25s;
}
div:hover::before {
    width: 200px;
    height: 64px;
    border-left: 3px solid #00e2ff;
    border-bottom: 3px solid #00e2ff;
}

我們分別控制元素的偽元素的高度、寬度、及下邊框的變化，并且給寬度過渡影片和下邊框的顏色影片設定了 0.25 秒的延遲，這樣元素的高度會先進行過渡，由于整體的過渡影片世界時間也是 0.25s，所以高度過渡影片結束后，才會開始寬度過渡影片，下邊框也才會出現顏色變化，

這樣就能把他們的過渡影片銜接在一起，體現到元素的 border 之上，看看效果：

利用同樣的原理，我們再把元素的另外一個偽元素也利用上，但是他們的影片世界，整體需要再全部加上 0.5 秒，等到上述的過渡影片執行完畢后才執行：

div::after {
    right: 0;
    bottom: 0;
}
div:hover::after{
    transition: height .25s, width .25s, border-top-color .25s;
    transition-delay: 0.5s, 0.75s, 0.75s;
    width: 200px;
    height: 64px;
    border-top: 3px solid #00e2ff;
    border-right: 3px solid #00e2ff;
}

這樣，我們可以把兩個偽元素的過渡影片合并，得到一個完整的 border 影片如下：

完整的 Demo 你可以戳這里：CodePen Demo -- 借助 transition-delay 實作按鈕 border 影片效果

所以，合理控制每一個屬性，就能組合得到各種有趣的效果，

動態改變 transition-duration

還有一個非常有意思的技巧，我們可以利用元素的一些偽類，動態的去改變元素的 transition-duration，

舉個例子：

div {
    width: 140px;
    height: 64px;
    border: 2px solid red;
    transition: 3s all linear;
}
div:hover {
    transition-duration: .5s; 
    border: 2px solid blue;
}

當滑鼠 hover 元素時，將元素的過渡影片的持續時間 transition-duration 從 3s 改成 0.5s，這樣可以做到元素 hover 的時候，過渡影片持續的時間是 0.5s，但是過渡復位的持續時間卻是 3s：

利用這個小技巧，我們嘗試制作一些有意思的效果，

純 CSS 實作的簽名板

利用上述的，小技巧，我們可以實作一個純 CSS 的簽名板，

首先，在高寬都為 500px 的容器中，實作一個 100x100 的 HTML 網格布局，利用 flex、grid 都行，這里為了方便，我借助了 Pug 模板引擎，

div.g-box
    -for(var i=0; i<100; i++)
        div.g-row
            -for(var j=0; j<100; j++)
                div.g-item

為了方便示意，我把每個格子加了個 border，實際上，背景和格子都是白色的：

為了實作簽名的效果，我們給每個格子 g-item 加上 hover 事件，hover 時改變當前格子背景色，同時，最重要的是，**在正常狀態設定一個非常大的 transition-duration，而在 hover 的時候，設定一個非常小的 transition-duration，偽代碼如下：

.g-item {
    transition: 999999s;
}
.g-item:hover {
    background: #000;
    transition: 0s;
}

看看效果：

這樣就實作了，滑鼠 hover 上去的時候，因為 transition: 0s 的緣故，背景色被快速的改變，而當 hover 效果離開， transition: 999999s 重新生效，黑色則會以一個非常非常慢的速度失效，以至于慢到感受不到它在發生變化，

當然，要實作簽名的話，目前來看還欠缺點什么，我們需要實作滑鼠 hover 到畫板上不會立即開始出發元素的背景色變化，只有滑鼠按下時（保持 :active 狀態），才開始遵循滑鼠軌跡改變顏色，當滑鼠停止點擊，則停止畫畫，

這個有個巧妙的方法可以實作，我們在畫布上，再疊加一層 div，層級 z-index 比畫布更高，當滑鼠 hover 到畫布上，其實是 hover 到這個遮罩層上，當滑鼠按下，觸發 :active 事件時，給元素添加一個 :activce 事件，將遮罩層移除即可，

偽代碼如下：

div.g-wrap
div.g-box
    -for(var i=0; i<100; i++)
        div.g-row
            -for(var j=0; j<100; j++)
                div.g-item

.g-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;

    &:active {
        display: none;
    }
}

這樣，一個完整的簽名板，或者說是畫板就實作了：

完整的代碼實作，并且利用 CSS 添加上了 reset 功能，你可以戳這里：CodePen Demo -- Pure CSS signature

reset 方法由于會同時改變所以元素的 background，會有點卡頓，所以在我的基礎上，好友小獅子用 animation 改良了一版 reset 不卡頓版本，可以戳這里：Pure CSS signature

利用這個技巧，其實就可以用 CSS 實作追隨滑鼠軌跡的功能（雖然很雞肋>_<），我們再可以和其他很多屬性混合起來，譬如混合模式和濾鏡，

像是這樣，來自好友 alphardex 的一個效果，利用了上述技巧，疊加了混合模式和濾鏡實作：

CodePen Demo -- Snow Scratch

最后

本文到此結束，希望對你有幫助 :)

更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，

如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，

標籤：Html/Css

上一篇：原型鏈

下一篇：演算法面試題三：兩個陣列的交集，加一，移動零