介紹
實驗中的功能壤蚜。 可動畫屬性列表
是一個 CSS 模塊什湘，定義了如何創(chuàng)建一個平滑地變換 CSS 屬性值的方法许布。它不僅允許創(chuàng)建變換方法合愈，同時也允許通過定時函數(shù)來控制變換方法。
比如，將一個元素的顏色從白色改為黑色，通常這個改變是立即生效的雇逞，使用 CSS transitions 后該元素的顏色將逐漸從白色變?yōu)楹谏凑找欢ǖ那€速率變化茁裙。這個過程可以自定義喝峦。
隱式過渡
通常將兩個狀態(tài)之間的過渡稱為隱式過渡（implicit transitions），因為開始與結(jié)束之間的狀態(tài)由瀏覽器決定呜达。
?
?
屬性
-
transition：簡寫屬性谣蠢。包含如下屬性：transition-delay：指定延遲，即屬性開始變化時與過渡開始發(fā)生時之間的時長查近。transition-duration：指定過渡的時長眉踱。或者為所有屬性指定一個值霜威，或者指定多個值谈喳，為每個屬性指定不同的時長。transition-property：指定哪個或哪些 CSS 屬性用于過渡戈泼。只有指定的屬性才會在過渡中發(fā)生動畫婿禽，其它屬性仍如通常那樣瞬間變化。transition-timing-function：指定一個函數(shù)大猛，定義屬性值怎么變化扭倾。
?
?
屬性 transition
過渡/動畫 都可以為一個元素在不同狀態(tài)之間切換的時候定義不同的過渡效果。比如在不同的偽元素之間切換挽绩，像是 :hover膛壹，:active或者通過 JavaScript 實現(xiàn)的狀態(tài)變化。
transition屬性可以被指定為一個或多個 CSS 屬性的過渡效果，多個屬性之間用逗號進行分隔模聋。
語法：
transition =
<single-transition>#
<single-transition> =
[ none | <single-transition-property> ] ||
<time> ||
<easing-function> ||
<time>
<single-transition-property> =
all |
<custom-ident>
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
語法示例：
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;
-
零或一個值肩民，表示轉(zhuǎn)換應(yīng)適用的屬性。這可能是以下任何一種：
- 關(guān)鍵字
none - 關(guān)鍵字
all - 命名 CSS 屬性的
<custom-ident>链方。
- 關(guān)鍵字
零或一個
<single-transition-timing-function>值表示要使用的過渡函數(shù)持痰。零，一或兩個
<time>值祟蚀。
當有一個值時工窍，第一個值被分配給transition-duration。
當有兩個值時暂题，第一個值被分配給transition-duration，第二個值被分配給transition-delay究珊。
?
?
屬性 transition-property
實驗中的功能
語法：
transition-property =
none |
<single-transition-property>#
<single-transition-property> =
all |
<custom-ident>
none：沒有過渡動畫薪者。all：所有可被動畫的屬性都表現(xiàn)出過渡動畫。IDENT：屬性名稱剿涮。由小寫字母 a 到 z言津，數(shù)字 0 到 9，下劃線（_）和破折號（-）取试。第一個非破折號字符不能是數(shù)字悬槽。同時，不能以兩個破折號開頭瞬浓。
?
?
屬性 transition-duration
實驗中的功能初婆，可以指定多個時長，每個時長會被應(yīng)用到由 transition-property 指定的對應(yīng)屬性上猿棉。如果指定的時長個數(shù)小于屬性個數(shù)磅叛，那么時長列表會重復。如果時長列表更長萨赁，那么該列表會被裁減弊琴。兩種情況下，屬性列表都保持不變杖爽。
語法：
transition-duration =
<time [0s,∞]>#
-
<time>：表示過渡屬性從舊的值轉(zhuǎn)變到新的值所需要的時間敲董。如果時長是0s，表示不會呈現(xiàn)過渡動畫慰安，屬性會瞬間完成轉(zhuǎn)變腋寨。不接受負值。
?
?
屬性 transition-timing-function
實驗中的功能
語法：
transition-timing-function =
<easing-function>#
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
-
<easing-function>：具體看CSS 數(shù)據(jù)類型 - <timing/esaing-function>篇
?
?
屬性 transition-delay
實驗中的功能
語法：
transition-duration =
<time [0s,∞]>#
-
<time>：表明動畫效果屬性生效之前需要等待的時間化焕。
?
?
應(yīng)用
示例1：顏色的變化
CSS
.d2{
display: flex;
flex-flow: row;
width: 300px;
justify-content: space-evenly;
}
.trans,
.trans1{
width: 100px;
height: 100px;
background-color: green;
}
.trans1{
transition: background-color 2s ease-in;
}
.trans:hover{
animation: 2s "ani1" 1 ease-in alternate;
}
.trans1:hover{
background-color: red;
}
@keyframes ani1 {
from{
background-color: green;
}
100%{
background-color: red;
}
}
示例2：顏色精置、大小的變化
CSS
.d2{
display: flex;
flex-flow: row;
width: 300px;
justify-content: space-evenly;
}
.trans,
.trans1{
width: 100px;
height: 100px;
background-color: green;
}
.trans1{
transition: background-color 2s ease-in, width 2s ease, height 2s ease;
}
.trans:hover{
animation: 2s "ani1" 2 ease-in alternate;
}
.trans1:hover{
background-color: red;
width: 150px;
height: 150px;
}
@keyframes ani1 {
from{
width: 100px;
height: 100px;
background-color: green;
}
100%{
width: 150px;
height: 150px;
background-color: red;
}
}
示例3：與JS一起使用
CSS:
p {
padding-left: 60px;
}
.foo{
position: absolute;
top: 0;
left: 0;
}
#foo1 {
border-radius: 50px;
width: 50px;
height: 50px;
background: #c00;
transition: all 1s;
}
#foo2 {
border-radius: 30px;
width: 30px;
height: 30px;
background: green;
}
JS:
<script>
var f1 = document.getElementById('foo1');
var f2 = document.getElementById('foo2');
document.addEventListener('click', function(ev){
f1.style.left = (ev.clientX-25)+'px';
f1.style.top = (ev.clientY-25)+'px';
f2.style.left = (ev.clientX-25)+'px';
f2.style.top = (ev.clientY-25)+'px';
},false);
</script>
HTML:
<p>隨便點擊某處來移動球</p>
<div id="foo1" class="foo"></div>
<div id="foo2" class="foo"></div>
?
?
檢測過渡是否完成
當過渡完成時觸發(fā)一個事件，在符合標準的瀏覽器下锣杂，這個事件是transitionend脂倦，在 WebKit 下是webkitTransitionEnd番宁。
transitionend 事件提供兩個屬性:
propertyName：字符串，指示已完成過渡的屬性赖阻。elapsedTime：浮點數(shù)蝶押，指示當觸發(fā)這個事件時過渡已運行的時間（秒）。這個值不受transition-delay火欧。
可以用 element.addEventListener() 方法來監(jiān)聽這個事件：
示例：
CSS:
.trans1{
transition: background-color 2s ease-in;
}
JS:
var el = document.getElementById("tra1");
el.addEventListener("transitionend",listener);
el.addEventListener("transitionstart",listener);
el.addEventListener("transitionrun",listener);
el.addEventListener("transitioncancel",listener);
var ul = document.getElementById("ul");
function listener(event){
var li = document.createElement("li");
switch (event.type){
case "transitionstart":
li.innerHTML = "時間：" + event.elapsedTime + ", 屬性：" + event.propertyName + "開始了";
break;
case "transitionend":
li.innerHTML = "時間：" + event.elapsedTime + ", 屬性：" + event.propertyName + "結(jié)束了";
break;
case "transitionrun":
li.innerHTML = "時間：" + event.elapsedTime + ", 屬性：" + event.propertyName + "正在運行,";
break;
case "transitioncancel":
li.innerHTML ="時間：" + event.elapsedTime + ", 屬性：" + event.propertyName + "取消了,";
break;
default:
break;
}
ul.appendChild(li);
}
?
?
當transition-property與transition-duration不一致
示例：
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s;
}
div {
transition-property: opacity, left;
transition-duration: 3s, 5s, 2s, 1s;
}
等價：
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 5s;
}
div {
transition-property: opacity, left;
transition-duration: 3s, 5s;
}
