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

ChokCoco發表於2021-02-01

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

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