理解CSS過渡transition


示例效果

屬性介紹

transition-property

transition-property定義應用過渡效果的CSS屬性名稱,默認值all,表示所有屬性都獲得過渡效果;屬性值none表示沒有屬性獲得過渡效果;property規定應用過渡效果的CSS屬性。

過渡屬性可以是多個值,多個屬性之間用逗號間隔。

示例:transition-property: opacity, width;

並不是所有CSS屬性都有過渡效果,只有具有中間值的屬性才有效果,一般來說屬性值可以為數值的均可獲得過渡。

transition-duration

transition-duration定義完成過渡的時長,默認值0s,屬性值為秒或毫秒

transition-timing-function

transition-timing-function定義過渡動畫函數。默認值ease,表示慢速開始,然后變快,慢速結束;linear表示勻速運動;ease-in表示慢速開始(慢到快);ease-out表示慢速結束(快到慢);ease-in-out表示慢速開始和結束(慢到快到慢);cubic-bezier(x1, y1, x2, y2)自定義貝塞爾運動曲線。

關於貝塞爾曲線可參考這篇文章:貝塞爾曲線掃盲

貝塞爾曲線:

過渡效果的貝塞爾曲線通過四個點來控制,繪制的是三次貝塞爾曲線,其中p0表示(0,0), p3表示(1,1)。transition-timing-function屬性通過確定p1(x1, y1)和p2(x2,y2)的坐標值來確定曲線值,x1,y1,x2,y2都是0到1范圍內的值(包括0和1)
在線獲取貝塞爾曲線值

過渡原理:

Vstart = 屬性起始值; Vend = 屬性結束值; Vres = 中間值; p = 過渡動畫函數輸出值

Vres = (1 - p) * Vstart + p * Vend

Vres就是根據曲線動畫計算出的不同時刻CSS屬性值

steps步進函數:
transition-timing-function屬性值除了可以為關鍵字和貝塞爾函數,還可以是steps步進函數,平時用到的情況很少,我能想到的就是進度條效果。steps步進函數將過渡事件划分為大小相等的時間間隔來運行,它有兩個參數:

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

第一個參數指定間隔數,值為正整數;第二個參數可選,默認值end,可選值start。參數end可簡單理解為第一幀是第一步開始,參數start表示第一幀是第一步結束。

示例中的例1和例2比較了這兩種效果,當鼠標放到第一個元素上時,步進分三次到達終點,每次中間間隔時間一樣,當鼠標放到第二元素上時,元素瞬間完成第一次步進,后兩次間隔時間一樣

transition-delay

過渡效果等待時間,默認值0s,屬性值秒或毫秒

transition

transition定義元素的過渡效果,它是以下幾個屬性的簡寫:

 transition-property
 transition-duration
 transition-timing-function
 transition-delay

默認值all 0s ease 0s

多值

上面介紹了transition的基本屬性,transition可以定義多個屬性值一起參與過渡:

.test {
  transition: width 2s linear 100ms, opacity 2s ease 100ms;
}
// 等同於
.test {
  transition-property: width, opacity;
  transition-duration: 2s;
  transition-timing-function: linear, ease;
  transition-delay: 100ms;
}



.test1 {
  transition: width 2s linear 100ms, height 1s ease 0s, opacity 2s linear 100ms;
}
// 等同於
.test1 {
  transition-property: width, height, opacity;
  transition-duration: 2s, 1s;
  transition-timing-function: linear, ease;
  transition-delay: 100ms, 0s;
}

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

過渡階段

過度分為前進(forward)和反向(reverse)兩個階段,若前進階段進行一段時間后進入反向階段,則反向階段的初始值是前進階段結束時的瞬間值。

以hover為例,當元素在非hover狀態時設置transition,則前進和方向過渡效果是一樣的;當在元素hover狀態時設置transition,則前進狀態是hover時設置的為准,反向狀態是非hover時設置的為准

例3和例4對比了兩種效果:把鼠標放到例3中的盒子上在移開,前進和反向動畫一樣,把鼠標放到例4中的盒子上再移開,前進有過渡動畫,反向就沒有了。

例5演示了設置前進和反向不同時間的過渡動畫

觸發方式

過渡觸發方式有三種:偽類觸發、媒體查詢和JavaScript觸發。

偽類觸發

例5演示了hover觸發。
例6演示了focus觸發,鼠標常按可查看過渡效果。
例7演示了active觸發。

媒體查詢

@media (max-width: 1000px){
  .test{
     width: 300px;
  }
}

JS觸發

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM