你可能不知道的 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

利用這個技巧，其實就能夠用 CSS 實現追隨鼠標軌跡的功能（雖然很雞肋>_<），咱們再能夠和其餘不少屬性混合起來，譬如混合模式和濾鏡。

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

CodePen Demo -- Snow Scratch

 

最後

本文到此結束，但願對你有幫助 :)

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

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。