JavaScript是單線程執(zhí)行的他嫡，代碼是一句一句執(zhí)行的，而異步任務(wù)墨林，如定時(shí)器或者動(dòng)畫(huà)月弛，會(huì)被壓入執(zhí)行隊(duì)列，在線程空閑時(shí)執(zhí)行。在CSS3動(dòng)畫(huà)出現(xiàn)之前，我們通常使用定時(shí)器和JavaScript實(shí)現(xiàn)動(dòng)畫(huà)效果，但是由于JavaScript單線程執(zhí)行系忙，很容易發(fā)生動(dòng)畫(huà)卡頓，效果較差惠豺。CSS3提供的過(guò)渡（transition）银还、動(dòng)畫(huà)（animation）、變換（transform）能比較好的為我們展現(xiàn)不同的動(dòng)畫(huà)效果洁墙，因此有必要對(duì)其進(jìn)行了解蛹疯、學(xué)習(xí)，本篇開(kāi)始介紹CSS3之過(guò)渡热监。
過(guò)渡（transition）
CSS過(guò)渡支持我們?cè)诟淖僀SS屬性時(shí)控制動(dòng)畫(huà)的變化效果捺弦。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)孝扛、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)列吼，并圓滑地以動(dòng)畫(huà)效果改變CSS的屬性值。
CSS過(guò)渡在獨(dú)立于JavaScript執(zhí)行線程的另一個(gè)線程里執(zhí)行苦始，JavaScript的執(zhí)行不會(huì)阻塞CSS動(dòng)畫(huà)寞钥，使得應(yīng)用動(dòng)畫(huà)效果更加流暢。
CSS3過(guò)渡簡(jiǎn)潔語(yǔ)法如下：
transition: [property] [duration] [timing-function] [delay];
property陌选，屬性名稱理郑；
duration蹄溉，過(guò)渡動(dòng)畫(huà)持續(xù)的時(shí)間；
-
timing-function您炉，動(dòng)畫(huà)執(zhí)行時(shí)間變化函數(shù)柒爵；
- ease-in，動(dòng)畫(huà)變化逐漸變快赚爵；
- ease-out餐弱，動(dòng)畫(huà)變化逐漸變慢；
- ease-in-out囱晴，動(dòng)畫(huà)先逐漸變快然后逐漸變慢；
- linear瓢谢，線性動(dòng)畫(huà)變換畸写；
- cubic-bezire(x1, y1, x2, y2)，定義動(dòng)畫(huà)時(shí)間變化曲線
- step(number, type)氓扛，定義動(dòng)畫(huà)變化區(qū)段塊
關(guān)于動(dòng)畫(huà)變化函數(shù)更多枯芬，請(qǐng)查看https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
delay，過(guò)渡動(dòng)畫(huà)屬性變化延遲執(zhí)行時(shí)間采郎。
注：可以一次聲明多個(gè)過(guò)渡變化千所，以逗號(hào)分隔。
CSS3過(guò)渡子屬性語(yǔ)法
我們可以通過(guò)CSS過(guò)渡子屬性分別控制CSS3過(guò)渡動(dòng)畫(huà)模塊：
- transition-property：定義將要使用CSS3過(guò)渡動(dòng)畫(huà)的單個(gè)或多個(gè)CSS屬性名稱
- transition-duration：定義發(fā)生過(guò)渡動(dòng)畫(huà)的單個(gè)或多個(gè)CSS屬性所對(duì)應(yīng)過(guò)渡動(dòng)畫(huà)執(zhí)行所需時(shí)間
- transition-timing-function：定義CSS3過(guò)渡動(dòng)畫(huà)過(guò)程中屬性值與時(shí)間的變化函數(shù)
- transition-delay： 定義過(guò)渡動(dòng)畫(huà)屬性變化延遲執(zhí)行時(shí)間
CSS3過(guò)渡動(dòng)畫(huà)實(shí)例
觀看CSS3過(guò)渡實(shí)例請(qǐng)進(jìn)入
html代碼：
<body>
<p>The box below combines transitions for: width, height, background-color, transform. Hover or click over the box to see these properties animated.</p>
<button class="trans_btn" onclick="document.querySelector('.box').className='trans box'">單擊觸發(fā)過(guò)渡動(dòng)畫(huà)</button>
<br><br>
<div class="box"></div>
<br>
</body>
CSS樣式：
.box {
border: 1px solid #FFCCCC;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.trans.box {
background-color: #FF0000;
width: 300px;
height: 300px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
CSS3過(guò)渡與transitionend
CSS屬性發(fā)生過(guò)渡變化時(shí)蒜埋，除了會(huì)執(zhí)行CSS相應(yīng)的指定變化淫痰，還會(huì)在完成時(shí)觸發(fā)transitionend事件。
transitionend
transitionend 事件在 CSS 完成過(guò)渡后觸發(fā)整份。如果過(guò)渡在完成前移除待错，例如transition-property屬性被移除，此事件將不被觸發(fā)烈评。
語(yǔ)法如下：
// Safari 3.1 到 6.0
object.addEventListener("webkitTransitionEnd", myScript);
// 標(biāo)準(zhǔn)方式
object.addEventListener("transitionend", myScript);
無(wú)限彈動(dòng)小球?qū)嵗?/h4>
html代碼：
<div class="ball"></div>
<div class="floor"></div>
css樣式：
* {
margin: 0;
padding: 0
}
html, body {
width: 100%:
height: 100%;
}
.ball {
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
top: 30px;
left: 20px;
border-radius: 50px;
}
.floor {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
}
JavaScript代碼：
<script>
window.onload = function() {
var down = false;
var transition = 'transition';
var transitionend = 'transitionend';
var ball = document.querySelector('.ball');
var floor = document.querySelector('.floor');
//事件注冊(cè)兼容
window.EventHandler = function () {
if (window.addEventListener) {
EventHandler = function(ele, type, callback, bubble) {
return ele.addEventListener(type, callback, bubble);
}
} else if (window.attachEvent) {
EventHandler = function(ele, type, callback, bubble) {
return ele.attachEvent('on' + type, callback);
}
}else {
EventHandler = function(ele, type, callback, bubble) {
ele['on' + type] = errorReport;
}
}
};
EventHandler(window);
//叛定瀏覽器前綴
if (typeof document.body.style.webkitTransition === 'string') {
transition = 'webkitTransition';
transitionend = 'webkitTransitionEnd';
}else if (typeof document.body.style.MozTransition === 'string') {
transition = 'MozTransition';
}
//小球彈動(dòng)實(shí)現(xiàn)
function bounceBall(ball) {
var ball = ball || document.querySelector('.ball');
if (down) {
ball.style[transition] = 'top 1s cubic-bezier(0, 0.27, 0.32, 1)';
ball.style.top = '30px';
down = false;
}else {
ball.style[transition] = 'top 1s cubic-bezier(1, 0, 0.96, 0.91)';
ball.style.top = (floor.offsetTop - 100) + 'px';
down = true;
}
}
//注冊(cè)transitionend事件火俄，實(shí)現(xiàn)無(wú)限彈動(dòng)效果
EventHandler(ball, transitionend, function(e) {
bounceBall(e.target);
});
EventHandler(ball, 'click', function(e) {
bounceBall(e.target);
});
bounceBall(ball);
};
</script>
本篇對(duì)CSS3過(guò)渡進(jìn)行了基本講解和拓展，并給出了兩個(gè)實(shí)例讲冠，供參考瓜客。
