深入理解CSS過渡transition_ZenDei技術網路在線

× 目錄 [1]定義 [2]過渡屬性 [3]持續時間[4]延遲時間[5]時間函數[6]多值[7]階段[8]觸發[9]API 前面的話通過過渡transition，可以讓web前端開發人員不需要javascript就可以實現簡單的動畫交互效果。過渡屬性看似簡單，但實際上它有很多需要註意的細節和容易混 ...

前面的話

　　通過過渡transition，可以讓web前端開發人員不需要javascript就可以實現簡單的動畫交互效果。過渡屬性看似簡單，但實際上它有很多需要註意的細節和容易混淆的地方。本文將介紹和梳理關於CSS過渡的知識

定義

　　過渡transition是一個複合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個子屬性。通過這四個子屬性的配合來完成一個完整的過渡效果

transition-property: 過渡屬性(預設值為all)
transition-duration: 過渡持續時間(預設值為0s)
transiton-timing-function: 過渡函數(預設值為ease函數)
transition-delay: 過渡延遲時間(預設值為0s)

　　[註意]IE9-不支持該屬性，IOS6.1-及android4.3-需要添加-webkit-首碼；而其餘版本瀏覽器支持標準寫法

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
/*     以下三值為預設值，稍後會詳細介紹 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}    
.test:hover{
    width: 500px;
}

<div class="test"></div>

//滑鼠移動到元素上，會出現寬度變化效果

複合屬性

　　過渡transition的這四個子屬性只有<transition-duration>是必需值且不能為0。其中，<transition-duration>和<transition-delay>都是時間。當兩個時間同時出現時，第一個是<transition-duration>，第二個是<transition-delay>；當只有一個時間時，它是<transition-duration>，而<transition-delay>為預設值0

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

　　[註意]transition的這四個子屬性之間不能用逗號隔開，只能用空格隔開。因為逗號隔開的代表不同的屬性(transition屬性支持多值，多值部分稍後介紹)；而空格隔開的代表不同屬性的四個關於過渡的子屬性

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
<!-- 代表持續時間為2s，延遲時間為預設值0s -->
    transition；2s;
}    
.test:hover{
    width: 500px;
}

<div class="test"></div>

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    <!-- 代表持續時間為1s，延遲時間為2s -->
    transition: 1s 2s;
}    
.test:hover{
    width: 500px;
}

<div class="test"></div>

過渡屬性

transition-property

　　值: none | all | <transition-property>[,<transition-property>]*

　　初始值: all

　　應用於: 所有元素

　　繼承性: 無

none: 沒有指定任何樣式
all: 預設值，表示指定元素所有支持transition-property屬性的樣式
<transition-property>: 可過渡的樣式，可用逗號分開寫多個樣式

可過渡的樣式

　　不是所有的CSS樣式值都可以過渡，只有具有中間值的屬性才具備過渡效果

Vstart = 開始值; Vend = 結束值; Vres = 中間值; p = 過渡函數的輸出值
Vres = (1 - p) * Vstart + p * Vend
當Vres具有有效值時，則該CSS樣式可過渡

顏色: color background-color border-color outline-color
位置: backround-position left right top bottom
長度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
數字: opacity visibility z-index font-weight zoom
組合: text-shadow transform box-shadow clip
其他: gradient

過渡持續時間

　　該屬性的單位是秒s或毫秒ms

transition-duration

　　值: <time>[,<time>]*

　　初始值: 0s

　　應用於: 所有元素

　　繼承性: 無

　　[註意]該屬性若不能為負值

　　[註意]若該屬性為0s則為預設值，若為0則為無效值。所以必須帶單位

　　[註意]該值為單值時，即所有過渡屬性都對應同樣時間；該值為多值時，過渡屬性按照順序對應持續時間

//DEMO中的過渡屬性值
transition-property: width,background;

過渡延遲時間

　　該屬性定義元素屬性延遲多少時間後開始過渡效果，該屬性的單位是秒s或毫秒ms

transition-delay

　　值: <time>[,<time>]*

　　初始值: 0s

　　應用於: 所有元素

　　繼承性: 無

　　[註意]該屬性若為負值，無延遲效果，但過渡元素的起始值將從0變成設定值(設定值=延遲時間+持續時間)。若該設定值小於等於0，則無過渡效果；若該設定值大於0，則過渡元素從該設定值開始完成剩餘的過渡效果

　　[註意]若該屬性為0s則為預設值，若為0則為無效值。所以必須帶單位

　　[註意]該值為單值時，即所有過渡屬性都對應同樣時間；該值為多值時，過渡屬性按照順序對應持續時間

//DEMO中的過渡屬性值
transition-property: width,background;

過渡時間函數

　　過渡時間函數用於定義元素過渡屬性隨時間變化的過渡速度變化效果

transition-timing-function

　　值: <timing-function>[,<timing-function>]*

　　初始值: ease

　　應用於: 所有元素

　　繼承性: 無

取值

　　過渡時間函數共三種取值，分別是關鍵字、steps函數和besizer函數

steps函數

　　steps步進函數將過渡時間劃分成大小相等的時間時隔來運行

　　steps步進函數為

steps(<integer>[,start | end]?)

<interger>:用來指定間隔個數(該值只能是正整數)
第二個參數: 該參數可選，預設是end，表示開始值保持一次；若參數為start，表示開始不保持

貝塞爾曲線

　　貝塞爾曲線通過p0-p3四個控制點來控制，其中p0表示(0,0)，p3表示(1,1)。而<transition-timing-function>就是通過確定p1(x1,y1)和p2(x2,y2)的值來確定的

transition-timing-function: cubic-bezier(x1,y1,x2,y2);

　　[註意]x1,y1,x2,y2都是0到1的值(包括0和1)

關鍵字

　　關鍵字其實是bezier函數或steps函數的特殊值

ease: 開始和結束慢，中間快。相當於cubic-bezier(0.25,0.1,0.25,1)
liner: 勻速。相當於cubic-bezier(0,0,1,1)
ease-in: 開始慢。相當於cubic-bezier(0.42,0,1,1)
ease-out: 結束慢。相當於cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease類似，但比ease幅度大。相當於cubic-bezier(0.42,0,0.58,1)
step-start: 直接位於結束處。相當於steps(1,start)
step-end: 位於開始處經過時間間隔後結束。相當於steps(1,end)

多值

　　transition的多個屬性值用逗號分隔開表示可以同時為多個值設置過渡屬性。

transtion: <single-transition>[,<single-transition>]*

<single-transition>: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

//property為all，timing-function為linear,delay為0s，duration為0s。表示無過渡行為
transition: 0s;

【1】若不同的transition-property的值，對應的transition-delay | transition-timing-function | transition-duration的屬性值都相同時，其他的屬性設置一個即可

#test1{
    transition-property: width,background;
    transition-delay: 200ms;
    transition-timing-function: linear;
    transition-duration: 2s;
}
/*類似於*/
#test2{
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

【2】當transition-property的值的個數多於對應的transition-delay | transition-timing-function | transition-duration的屬性值(屬性值的個數大於1個)時，將按順序開始取值

#test1{
    transition-property: width,background,opacity;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*類似於*/
#test2{
    transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms;
}

【3】當transition-property的值少於對應的transition-delay | transition-timing-function | transition-duration的屬性值時，多餘的其他屬性值將無效

#test1{
    transition-property: width;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*類似於*/
#test2{
    transition: width 2s linear 200ms;
}

【4】當transition-property的值中出現一個無效值，它依然按順序對應transition的其他屬性值（其他屬性出現無效值，處理情況也類似）

#test1{
    transition-property: width,wuxiao,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*類似於*/
#test2{
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

【5】當transition-property的值中，有些值重覆出現多次，則以最後出現的值為準，前面所有出現的值都被認定為無效值，但依然按順序對應transition的其他屬性值

#test1{
    transition-property: width,width,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}
/*類似於*/
#test2{
    transition: width 500ms ease 0s,background 2s linear 200ms;
}

過渡階段

【1】過渡開始時間=樣式改變的時刻+過渡延遲時間；而過渡結束時間=過渡開始時間+過渡持續

【2】過渡起始值=過渡前的過渡屬性值；而過渡結束值=過渡完成後的過渡屬性值

【3】過渡分為兩個階段：前進(forward)和反向(reverse)。若前進階段進行一段時間後進入反向階段。則反向階段的初始值是前進階段結束時的瞬時值

【4】以hover為例，若在元素非hover態時設置transition，相當於設置的反向狀態。而前進和反向是一致的。而如果在元素hover態設置transition，則前進狀態以hover態設置的為準，而反向狀態以非hover態設置的為準

.test{
    width: 100px;
    transition: 3s;
}    
.test:hover{
    width: 500px;
    transition: 500ms;
}

【5】如果子元素和父元素過渡屬性都一致。若觸發子元素過渡時，父元素正在過渡，則將父元素過渡的中間態的值作為子元素過渡的初始值

.box:hover{
    font-size: 50px;
}
.test:hover{
    font-size: 30px;
}

<div class="box">
    <div class="test">test</div>
</div>

【6】若過渡起始值或過渡開始值為auto，則瀏覽器不會自己計算成具體數字值，而是不發生過渡效果。所以要過渡某些屬性，首先需要將其重置成具體數字值

　　[註意]低版本webkit內核瀏覽器存在bug，會產生反向的過渡效果

.test{
    width: 100px;
    -webkit-transition: width 2s;
    transition:width 2s;
}    
.test:hover{
    width:auto;
}

【7】隱式過渡是指一個屬性改變時引起另一個屬性的改變。如border-width是1em，則font-size改變時，border-width也會相應的改變。firefox和IE瀏覽器支持隱式過渡。而webkit內核瀏覽器不支持隱式過渡。

.test{
    border: 1px solid black;
    -webkit-transition: font-size 2s;
    transition:font-size 2s;
    font: 20px/100px "宋體";
}    
.test:hover{
    font-size: 40px;
    border-right-width: 1em;
}

觸發方式

　　一般地，過渡transition的觸發有三種方式，分別是偽類觸發、媒體查詢觸發和javascript觸發。其中常用偽類觸發包括:hover、:focus、:active等

【1】hover

　　滑鼠懸停觸發

【2】active

　　用戶單擊元素並按住滑鼠時觸發

【3】focus

　　獲得焦點時觸發

【4】@media觸發

　　符合媒體查詢條件時觸發

/* 把瀏覽器的寬度拖動到小於1000px時觸發 */
@media (max-width: 1000px){
    .test{
        width: 500px;
    }
}

【5】點擊事件

　　用戶點擊元素時觸發

test.onclick = function(){
    test.style.width = '300px';
    setTimeout(function(){
        test.style.width = '100px';
    },3000);
}

API

　　關於過渡transition的事件只有一個，是transitionend事件，它發生在過渡事件完成後

　　[註意]safari3.1-6、ISO3.2-6.1、android2.1-4.3需要使用webkitTransitionEnd事件

【1】過渡分為兩個階段：前進階段和反向階段。transitionend事件在前進階段結束時會觸發，在反向階段結束時也會觸發。

var index = 0;
//相容低版本safari、IOS、android
test.addEventListener("webkitTransitionEnd", myFunction);
// 標準語法
test.addEventListener("transitionend", myFunction);
function myFunction() {
    index++;
    this.innerHTML = index;
}

【2】過渡事件觸發的次數與transition-property過渡屬性的個數有關。過渡屬性有幾個就會觸發幾次

    transition: width 1s,background-color 1s;
    -webkit-transition: width 1s,background-color 1s;

【3】如果過渡屬性是複合屬性，如border-width相當於是border-top-width、border-bottom-width、border-left-width和border-right-width這四個屬性的集合。則過渡事件觸發4次

　　[註意]在低版本webkit內核瀏覽器里只觸發1次

    transition:border-width 1s;
    -webkit-transition: border-width 1s;

【4】如果過渡屬性是預設值all，則過渡事件的次數是計算後的非複合的過渡屬性的個數。如果發生過渡的屬性是border-width和width，則經過計算後過渡事件應該觸發5次

　　[註意]在低版本webkit內核瀏覽器中處理情況也一致

.test{
    width: 50px;
    border: 1px solid black;
    transition:all 1s;
    -webkit-transition: all 1s;
}    
.test:hover{
    border-width: 10px;
    width: 100px;
}

【5】如果過渡延遲時間為負值，且絕對值大於等於過渡持續時間時，低版本webkit內核瀏覽器不會產生過渡效果，但會觸發過渡事件；而其他瀏覽器即不會產生過渡效果，也不會觸發過渡事件

    transition:width 1s -1s;
    -webkit-transition: width 1s -1s;

【6】如果過渡屬性是存在複合屬性及該複合屬性包含的非複合屬性，則瀏覽器計算複合屬性的子屬性時，不會重覆計算已包含的屬性

　　[註意]低版本webkit內核瀏覽器會出現bug，不僅複合屬性被當作一個屬性來觸發事件，而且會多觸發一次

[註意]當過渡事件執行完後，應及時使用removeEventListener取消綁定，以免對其他效果造成影響

var index = 0;
//相容低版本safari、IOS、android
test.addEventListener("webkitTransitionEnd", myFunction);
// 標準語法
test.addEventListener("transitionend", myFunction);
function myFunction() {
    index++;
    this.innerHTML = index;
    if(index == 1){
        test.removeEventListener("webkitTransitionEnd", myFunction);
        test.removeEventListener("transitionend", myFunction);
    }
}