CSS3之過渡基礎(chǔ)知識
CSS3之transition
JavaScript是單線程執(zhí)行的，代碼是一句一句執(zhí)行的，而異步任務(wù)，如定時器或者動畫，會被壓入執(zhí)行隊列，在線程空閑時執(zhí)行。在CSS3動畫出現(xiàn)之前，我們通常使用定時器和JavaScript實現(xiàn)動畫效果，但是由于JavaScript單線程執(zhí)行，很容易發(fā)生動畫卡頓，效果較差。CSS3提供的過渡（transition）、動畫（animation）、變換（transform）能比較好的為我們展現(xiàn)不同的動畫效果，因此有必要對其進行了解、學(xué)習(xí)，本篇開始學(xué)習(xí)CSS3 之過渡。
過渡（transition）
CSS過渡支持我們在改變CSS屬性時控制動畫的變化效果。這種效果可以在鼠標單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值。
CSS過渡在獨立于JavaScript執(zhí)行線程的另一個線程里執(zhí)行，JavaScript的執(zhí)行不會阻塞CSS動畫，使得應(yīng)用動畫效果更加流暢。
CSS3過渡簡潔語法如下：
transition: [property] [duration] [timing-function] [delay];
property，屬性名稱；
duration，過渡動畫持續(xù)的時間；
timing-function，動畫執(zhí)行時間變化函數(shù)；
ease-in，動畫變化逐漸變快；
ease-out，動畫變化逐漸變慢；
ease-in-out，動畫先逐漸變快然后逐漸變慢；
linear，線性動畫變換；
cubic-bezire(x1, y1, x2, y2)，定義動畫時間變化曲線
step(number, type)，定義動畫變化區(qū)段塊
關(guān)于動畫變化函數(shù)更多，請查看https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
delay，過渡動畫屬性變化延遲執(zhí)行時間。
注：可以一次聲明多個過渡變化，以逗號分隔。
CSS3過渡子屬性語法
我們可以通過CSS過渡子屬性分別控制CSS3過渡動畫模塊：
transition-property：定義將要使用CSS3過渡動畫的單個或多個CSS屬性名稱
transition-duration：定義發(fā)生過渡動畫的單個或多個CSS屬性所對應(yīng)過渡動畫執(zhí)行所需時間
transition-timing-function：定義CSS3過渡動畫過程中屬性值與時間的變化函數(shù)
transition-delay： 定義過渡動畫屬性變化延遲執(zhí)行時間
CSS3過渡動畫實例
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ā)過渡動畫</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過渡與transitionend
CSS屬性發(fā)生過渡變化時，除了會執(zhí)行CSS相應(yīng)的指定變化，還會在完成時觸發(fā)transitionend事件。
transitionend
transitionend 事件在 CSS 完成過渡后觸發(fā)。如果過渡在完成前移除，例如transition-property屬性被移除，此事件將不被觸發(fā)。
語法如下：
// Safari 3.1 到 6.0
object.addEventListener("webkitTransitionEnd", myScript);
// 標準方式
object.addEventListener("transitionend", myScript);
無限彈動小球?qū)嵗?
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');
//事件注冊兼容
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';
}
//小球彈動實現(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;
}
}
//注冊transitionend事件，實現(xiàn)無限彈動效果
EventHandler(ball, transitionend, function(e) {
bounceBall(e.target);
});
EventHandler(ball, 'click', function(e) {
bounceBall(e.target);
});
bounceBall(ball);
};
</script>
本篇對CSS3過渡進行了基本講解和拓展，并給出了兩個實例，供參考。
原文來自：驚鴻三世的博客
熱門帖子
- iDev 全平臺開發(fā)者大會門票免費送！限量10張！
- 蘋果Mac Pro垃圾桶 最低配的ME253CH
- 本人想買個蘋果電腦搞開發(fā)，哪位大俠指點下
- 求助：failable initializer 'init(name:)' cannot override a non-failable initializer
- 為慶祝Swift發(fā)布1個月，雨燕社區(qū)正式上線。
- 在UITextFeild里輸入數(shù)據(jù)，這個數(shù)據(jù)怎么做加減乘除？
- Swift 高仿喜馬拉雅FM
- 要成為自由職業(yè)者？先要學(xué)會蘋果的Swift哦
- 用swift實現(xiàn)的調(diào)用系統(tǒng)相機，相冊的DEMO
- 關(guān)于嵌入式引用\()