CSS3——過渡（transition）

leejan97 發(fā)布于2019-08-29 12:57 / 3239人閱讀

摘要：表示任何屬性都不應(yīng)用過渡，并且可以終止正在執(zhí)行的過渡。提供兩種計(jì)算曲線階梯函數(shù)三次貝茲曲線。在插入元素如或改變屬性后立即使用過渡元素將視為沒有開始狀態(tài)，始終處于結(jié)束狀態(tài)。過渡取消不會(huì)觸發(fā)該事件。

一、概述

CSS屬性的值從一個(gè)值變成另一個(gè)值的過程叫做漸變，重點(diǎn)突出變化的過程。CSS3 transition系列屬性可控制這個(gè)變化過程，使得屬性值變化過程更加平滑。一個(gè)過渡應(yīng)包含這幾個(gè)屬性：

A：哪些屬性需要過渡？

需要過度的CSS屬性（也就指定舊值和新值）

B：過渡多久完成？

持續(xù)時(shí)間，即從舊值變成新值的過程持續(xù)的時(shí)間。這個(gè)時(shí)間不包含延遲時(shí)間。

C：過渡中間值如何計(jì)算？

隨著時(shí)間的推移，過渡過程中屬性中間值計(jì)算方式。

D：多久后開始過度？

延遲多久開始過度，即從屬性值改變到開始執(zhí)行過渡的時(shí)間。

E：什么時(shí)候執(zhí)行過渡？

當(dāng)屬性值發(fā)生變化時(shí)執(zhí)行過渡。這個(gè)由瀏覽器控制，不需要作者控制。

綜上所述如果把過渡作為一個(gè)類型的話，則：<過渡> =

二、語法

CSS3通過tansition系列屬性（transition-property, transition-duration, transition-timing-function, transition-delay，transition）控制過渡。

2.1 transition-property 2.1.1 介紹

用來指定哪些CSS屬性應(yīng)用過渡，多個(gè)屬性用逗號隔開。

2.1.2 語法

transition-property: none |  [, ]*
 = all | 
默認(rèn)值：all

從語法中可以看到transition-property的取值要么是none要么是列表。兩種值不同共存的，并且"inherit","initial"也不能和列表共存。
none：

表示任何屬性都不應(yīng)用過渡，并且none可以終止正在執(zhí)行的過渡。

all：

表示所有可動(dòng)畫的屬性都應(yīng)用過渡。注意all關(guān)鍵字是一種特殊的，他是表示所有屬性的簡潔寫法。所以他可以和其他屬性名共存，但是最好不要這樣做。

非all的：

屬性的名稱標(biāo)識符。

2.1.3 用法

A：

transition-property: width;
transition-duration: 1s;

表示：with屬性應(yīng)用一個(gè)持續(xù)時(shí)間為1s的過渡，即

B：

transition-property: width, background-color;
transition-duration: 1s, 2s;

表示：
with屬性應(yīng)用一個(gè)持續(xù)時(shí)間為1s的過渡，即
background-color屬性應(yīng)用一個(gè)持續(xù)時(shí)間為2s的過渡，即

C：

transition-property: width, background-color, height;
transition-duration: 1s,2s;

表示：
with屬性應(yīng)用一個(gè)持續(xù)時(shí)間為1s的過渡，即
background-color屬性應(yīng)用一個(gè)持續(xù)時(shí)間為2s的過渡，即
height屬性應(yīng)用一個(gè)持續(xù)時(shí)間為1s的過渡，即

注意：
該例中并沒有顯示指定height屬性過渡持續(xù)時(shí)間。如果transition-property屬性指定值個(gè)數(shù)多于tansition-duration屬性（transition-timing-function, transition-delay也是這樣）指定的值個(gè)數(shù)，則會(huì)循環(huán)重復(fù)tansition-duration的值，即此例中transition-duration的值等價(jià)于：transition-duration: 1s, 2s, 1s。如果transition-duration的值指定的值個(gè)數(shù)多于transition-property屬性指定值格式，則多于的被忽略。
D：

transition-property: width, heighttt, background-color;
transition-duration: 1s, 1.5s, 2s;

表示：
with屬性應(yīng)用一個(gè)持續(xù)時(shí)間為1s的過渡，即
heighttt屬性（雖然該屬性heighttt）應(yīng)用一個(gè)持續(xù)時(shí)間為1.5s的過渡，即< heighttt, 1s, ease, 0s>
background-color屬性應(yīng)用一個(gè)持續(xù)時(shí)間為2s的過渡，即
注意：
該例中有個(gè)非法屬性heighttt。tansition-property屬性列表中包含非法屬性或者非動(dòng)畫的屬性也是會(huì)創(chuàng)建個(gè)過渡，同理也會(huì)占用tansition-duration指定的值列表的一個(gè)值。
E：

transition-property: width, all, background-color;
transition-duration: 2s, 5s, 0.5s;

表示：所有可動(dòng)畫的屬性應(yīng)用一個(gè)持續(xù)5s的過渡，即
注意：
該例中all和其他屬性同存。all關(guān)鍵字會(huì)導(dǎo)致其他指定的屬性被忽略，并且根據(jù)all的位置相應(yīng)的確定過渡其他值。如該例中all在第二個(gè)位置，所以對應(yīng)的持續(xù)時(shí)間是5s.

2.2 transition-duration 2.2.1 介紹

定義過渡的持續(xù)時(shí)間，即從過渡開始到過渡結(jié)束的時(shí)間。

2.2.2 語法

transition-duration:  [, ]*
默認(rèn)值：0s

2.2.3 用法

見2.1

2.3 transition-timing-function 2.3.1 介紹

指定過渡過程中屬性中間值的計(jì)算方式。CSS3提供兩種計(jì)算曲線：階梯函數(shù)（stepping function), 三次貝茲曲線（cubic-beizer）。

1) 階梯函數(shù)

階梯函數(shù)由兩部分構(gòu)成（見W3C）：
步數(shù)：步數(shù)是通過一個(gè)整數(shù)指定，并且每步的時(shí)間長度一樣（即把持續(xù)時(shí)間等分，并且輸出值也是等分的）
什么時(shí)間改變值：指定在每步的什么時(shí)間點(diǎn)改變值，只支持兩個(gè)時(shí)間點(diǎn)：每步的開始和每步的結(jié)束。

2) 三次貝茲曲線

CSS3提供的三次貝茲曲線由四個(gè)點(diǎn)構(gòu)成（P0-P3)，其中P0（0，0）， P3(1,1)是固定的。作者只能控制p1,p2點(diǎn)的位置來控制貝茲曲線。

2.3.2 語法

transition-timing-function: [, ]*
 = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)
x1,y1, x2, y2 =

1）CSS3預(yù)定義了一些常用的階梯函數(shù)和貝茲曲線，見W3C。

ease: 平滑（先加速（加速時(shí)間短），后減速）
linear: 線性
ease-in: 加速
ease-out: 減速
ease-in-out: 先加速，后減速（加速、減速時(shí)間相等）

2）自定義的階梯函數(shù)：steps([, [end| start]?])

通過steps函數(shù)可以自定義階梯函數(shù)，參數(shù)1指定步數(shù)，參數(shù)2指定改變值的時(shí)間點(diǎn)。start表示在每步的開始改變值，end表示在每步的結(jié)束改變值。參數(shù)2是可選的，缺省時(shí)取值end。

3）自定義三次貝茲曲線：cublic-bezier(x1, y1, x2, y2)

通過cublic-bezier函數(shù)自定義三次貝茲曲線。指定p1, p2點(diǎn)位置（p0, p3是固定值），其中x軸的取值范圍只能是[0, 1]，而y軸的取值不受限制。更好了查看貝茲曲線效果參考http://cubic-bezier.com/

2.3.3 用法【High】

見參考Understanding CSS Timing Functions，里面列舉了各種舉例。

2.4 transition-delay 2.4.1 介紹

指定過渡延遲執(zhí)行的時(shí)間，即從DOM元素CSS屬性值發(fā)生變化（賦值個(gè)新目標(biāo)值）到DOM元素開始執(zhí)行過渡之間的時(shí)間。

2.4.2 語法

transition-delay: [, ]*
默認(rèn)值：0s

延遲時(shí)間可以為負(fù)值，為負(fù)值時(shí)會(huì)立馬執(zhí)行過渡（就像沒有延遲一樣），但是起始值是過渡執(zhí)行一段時(shí)間（延遲時(shí)間的絕對值）時(shí)的值。換句話說，負(fù)值延遲時(shí)間X表示當(dāng)屬性值發(fā)生變化時(shí)延遲已經(jīng)在X時(shí)間前完成了，并且已經(jīng)執(zhí)行過渡X時(shí)間了。實(shí)際用戶看到的過渡時(shí)間比實(shí)際執(zhí)行事件少了X事件。比如-2s，表示在屬性值發(fā)生變化時(shí)已經(jīng)執(zhí)行過渡2s了，并且當(dāng)前的屬性的起始值應(yīng)該是執(zhí)行過渡2s時(shí)的值。

2.4.3 用法

A：

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: .5s;

表示：
width屬性應(yīng)用一個(gè)持續(xù)1s, 延遲0.5s，時(shí)間函數(shù)為linear的過渡，
B:

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: -.5s; /* 延遲時(shí)間為負(fù)值 */

表示：
width屬性應(yīng)用一個(gè)持續(xù)1s, 延遲-0.5s，時(shí)間函數(shù)為linear的過渡，，用戶體驗(yàn)的過渡時(shí)間應(yīng)該是0.5s.

2.4.5 Issues/Concern

A：負(fù)值延遲時(shí)間會(huì)影響實(shí)際過渡執(zhí)行的時(shí)間。

2.5 transition 2.5.1 介紹

transition是其他transition-屬性的簡潔方式。

2.5.2 語法

transition: [, ]*
 = [ none |  ] ||  ||  ||

注意在tansition屬性中有兩個(gè)類型的值（持續(xù)時(shí)間，延遲時(shí)間），規(guī)定前面的時(shí)間是持續(xù)時(shí)間，后面的表示延遲時(shí)間。

2.5.3 用法

A：

transition: none;

表示：所有屬性都不應(yīng)用過渡，等價(jià)于transition-property: none;
B：

transition: width 2s

表示： width屬性應(yīng)用一個(gè)持續(xù)2s的過渡，即

三、過渡的開始【？】

當(dāng)一個(gè)可動(dòng)畫的屬性的計(jì)算值發(fā)生變化時(shí)，瀏覽器就根據(jù)tansition系列屬性的值決定給該屬性應(yīng)用什么樣的過渡。

3.1 過渡過程中屬性值發(fā)生變化 3.1.1：tansition系列屬性值發(fā)生變化：

過渡過程中tansition屬性發(fā)生變化并不會(huì)影響本次過渡，除了tansition-property的none取值（會(huì)終止當(dāng)前過渡）

3.1.2：應(yīng)用過渡的屬性發(fā)生變化：

終止當(dāng)前過渡，并根據(jù)新的值應(yīng)用一個(gè)新的過渡。

注意：

DOM元素CSS屬性真實(shí)值是隨著漸變過程動(dòng)態(tài)變化的，漸變過程中獲取元素的屬性值：是當(dāng)時(shí)漸變中的值（處于舊值和新值直接的一個(gè)值）。

在插入元素（如 .appendChild()）或改變屬性display: none后立即使用過渡, 元素將視為沒有開始狀態(tài)，始終處于結(jié)束狀態(tài)。簡單的解決辦法，改變屬性前用 window.setTimeout() 延遲幾毫秒。

四、過渡事件 4.1 介紹

過渡完成后會(huì)觸發(fā)TransitionEvent事件。過渡取消不會(huì)觸發(fā)該事件。

var transitionProperty = (function() {
            var t,
                el = document.createElement("surface"),
                transitions = {
                    "transition": {
                        eventName: "transitionend",
                        cssName: "transition"
                    },
                    "OTransition": {
                        eventName: "oTransitionEnd",
                        cssName: "-o-transition"
                    },
                    "MozTransition": {
                        eventName: "transitionend",
                        cssName: "-moz-transition"
                    },
                    "WebkitTransition": {
                        eventName: "webkitTransitionEnd",
                        cssName: "-webkit-transition"
                    }
                }

            for(t in transitions){
                if( el.style[t] !== undefined ){
                    return transitions[t];
                }
            }
        })()

五、可動(dòng)畫屬性

哪些屬性可以應(yīng)用transition：只能是可動(dòng)畫的CSS屬性可以應(yīng)用。

六、兼容性

見：
http://caniuse.com/#search=tr...
https://developer.mozilla.org...

參考

W3C： https://www.w3.org/TR/css3-tr...
MDN：https://developer.mozilla.org...
W3C+：http://www.w3cplus.com/conten...
cubic-beizer詳解：http://www.candoudou.com/arch...
Understanding CSS Timing Functions【High】：https://www.smashingmagazine....
【工具】
緩動(dòng)函數(shù)（更直觀的查看過渡動(dòng)畫）：http://easings.net/zh-cn
在線繪制貝茲曲線【High】：http://cubic-bezier.com/

GPU云服務(wù)器云服務(wù)器 -transition transit Transition Transitions

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112258.html

發(fā)表評論

登陸后可評論

0條評論

leejan97

男|高級講師

我要關(guān)注我要私信

TA的文章

【LeetCode 二叉樹專項(xiàng)】尋找重復(fù)的子樹（652）

閱讀 2533·2021-11-15 11:38
#雙11#TmhHost，VPS循環(huán)8折，獨(dú)服永久7折，可選美國CN2+AS9929/中國香港CN2

閱讀 2893·2021-11-02 14:44
MoeCloud：獨(dú)家英國CN2 GIA線路，商寬1000Mbps 帶寬，月付259元起，可解鎖Ne

閱讀 3830·2021-09-26 10:13
Vultr機(jī)房測評 - Vultr新加坡Singapore機(jī)房綜合速度和線路去程回程測試

閱讀 3072·2021-08-13 15:02
CSS Grid響應(yīng)式網(wǎng)頁布局 - W3Schools視頻03

閱讀 790·2019-08-30 15:56
js移動(dòng)端滑倒頂部加載歷史消息解決方案!

閱讀 1469·2019-08-30 15:53
記一次驚心動(dòng)魄的前端性能優(yōu)化之旅

閱讀 2366·2019-08-30 13:01
CSS3——過渡（transition）

閱讀 3240·2019-08-29 12:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS3——過渡（transition）

相關(guān)文章

CSS3-transition常用屬性及示例

CSS3的過渡和動(dòng)畫

css3中的變形（transform）、過渡（transition）、動(dòng)畫（animation）屬性

***CSS3-transition***

css3過渡

發(fā)表評論

0條評論

leejan97

男|高級講師

TA的文章

【LeetCode 二叉樹專項(xiàng)】尋找重復(fù)的子樹（652）

#雙11#TmhHost，VPS循環(huán)8折，獨(dú)服永久7折，可選美國CN2+AS9929/中國香港CN2

MoeCloud：獨(dú)家英國CN2 GIA線路，商寬1000Mbps 帶寬，月付259元起，可解鎖Ne

Vultr機(jī)房測評 - Vultr新加坡Singapore機(jī)房綜合速度和線路去程回程測試

CSS Grid響應(yīng)式網(wǎng)頁布局 - W3Schools視頻03

js移動(dòng)端滑倒頂部加載歷史消息解決方案!

記一次驚心動(dòng)魄的前端性能優(yōu)化之旅