<dfn id="hx5t3"><strike id="hx5t3"><em id="hx5t3"></em></strike></dfn>

    <thead id="hx5t3"></thead><nobr id="hx5t3"><font id="hx5t3"><rp id="hx5t3"></rp></font></nobr>

    <listing id="hx5t3"></listing>

    <var id="hx5t3"></var>
    <big id="hx5t3"></big>

      
      

      <output id="hx5t3"><ruby id="hx5t3"></ruby></output>
      <menuitem id="hx5t3"><dfn id="hx5t3"></dfn></menuitem>

      <big id="hx5t3"></big>

        頭圖

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

        chokcoco

        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: autowidth: 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

        最后

        本文到此結束,希望對你有幫助 :),想 Get 到最有意思的 CSS 資訊,千萬不要錯過我的公眾號 -- iCSS前端趣聞 ??

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

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

        閱讀 1.8k

        iCSS
        CSS 奇技淫巧,在這里,都有。

        坎坷切圖仔

        3.3k 聲望
        263 粉絲
        0 條評論

        坎坷切圖仔

        3.3k 聲望
        263 粉絲
        宣傳欄
        一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕