深入理解CSS過渡transition


前面的話

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

 

定義

  過渡transition是一個復合屬性,包括transition-propertytransition-durationtransition-timing-functiontransition-delay這四個子屬性。通過這四個子屬性的配合來完成一個完整的過渡效果

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

  [注意]IE9-不支持該屬性,safari3.1-6、IOS3.2-6.1、android2.1-4.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函數和bezier函數

steps函數

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

  steps步進函數為

steps(<integer>[,start | end]?)
<integer>:用來指定間隔個數(該值只能是正整數)
第二個參數: 該參數可選,默認是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)
linear: 勻速。相當於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事件

屬性

  transitionEnd的事件對象具有以下3個私有屬性  

  propertyName:發生transition效果的CSS屬性名

  elapsedTime:代表發生實際效果的持續時間。若完整進行,則返回完整時間;若中途中斷,則返回實際時間

  [注意]該屬性具有兼容性問題,chrome返回持續時間加延遲時間,而其他瀏覽器只返回持續時間

<style>
#test
{height: 100px;width: 100px;background-color: pink;
transition
: width 1.5s 0.5s;}
#test:hover
{width: 200px;}
</style>

<div id="test"></div>
<script>
test.addEventListener(
"transitionend", myFunction);
function myFunction(e){
e
= e || event;
test.innerHTML
= 'propertyName:' + e.propertyName + '; elapsedTime:' + e.elapsedTime + '; pseudoElement:' + e.pseudoElement;
}
</script>

   pseudoElement:如果transition效果發生在偽元素,會返回該偽元素的名稱,以“::”開頭。如果不發生在偽元素上,則返回一個空字符串''

  [注意]若transition效果發生在偽元素上,IE瀏覽器將不會觸發transitionEnd事件

<style>
#test
{height: 100px;width: 100px;position: relative;background-color: lightblue;}
#test:before
{content:'我是偽元素';position: absolute;height: 100px;width: 100px;background-color: pink;
left
:200px;}
#test:hover:before
{width: 200px;transition: width 1.5s 0.5s;}
</style>

<div id="test"></div>
<script>
test.addEventListener(
"transitionend", myFunction);
function myFunction(e){
console.log(event)
e
= e || event;
test.innerHTML
= 'propertyName:' + e.propertyName + '; elapsedTime:' + e.elapsedTime + '; pseudoElement:' + e.pseudoElement;
}
</script>

注意事項

【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,不僅復合屬性被當作一個屬性來觸發事件,而且會多觸發一次

.test{
border: 1px solid black;
transition:border
-width 1s,border-left-width 2s;
-webkit-transition: border-width 1s,border-left-width 2s;
}
.test:hover{
border
-width:10px;
}

  [注意]當過渡事件執行完后,應及時使用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);
}
}


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



CSS transition 過渡 詳解 CSS過渡動畫之transition CSS 3學習——transition 過渡 CSS之transition過渡練習 深入理解CSS浮動 css深入理解padding CSS深入理解之margin css深入理解z CSS深入理解Z css之深入理解padding
 
粤ICP备14056181号  © 2014-2021 ITdaan.com