CSS transitions提供了一種在更改CSS屬性時控制動畫速度的方法詳解點這 。
u=3294564858,810299706&fm=27&gp=0.jpg
其可以讓屬性變化成為一個持續(xù)一段時間的過程沸版，而不是立即生效的。比如，將一個元素的顏色從白色改為黑色尚氛，通常這個改變是立即生效的，使用 CSS transitions 后該元素的顏色將逐漸從白色變?yōu)楹谏床常凑找欢ǖ那€速率變化阅嘶。這個過程可以自定義。
語法簡寫：
div { transition: <property> <duration> <timing-function> <delay>; }
transition是一種過渡效果,執(zhí)行一次载迄。
好了讯柔，看完詳解，相信您一定會感嘆神奇的css护昧，是的魂迄，下面我們來說個栗子，感受一下它的魅力惋耙。
任務(wù)描述
- 如圖极祸，實現(xiàn)一個類似棋盤的格子空間慈格，每個格子用兩個數(shù)字可以定位，一個紅正方形的DOM在這個空間內(nèi)遥金，正方形中的藍(lán)色邊表示這是他的正面浴捆，有一個input輸入框。
圖片.png
- 在輸入框中允許輸入如下指令稿械，按下按鈕后选泻，使得正方形做相應(yīng)動作
GO：向藍(lán)色邊所面向的方向前進一格（一格等同于正方形的邊長）
TUN LEF：向左轉(zhuǎn)（逆時針旋轉(zhuǎn)90度）
TUN RIG：向右轉(zhuǎn)（順時針旋轉(zhuǎn)90度）
TUN BAC：向右轉(zhuǎn)（旋轉(zhuǎn)180度）
TRA LEF：向屏幕的左側(cè)移動一格，方向不變
TRA TOP：向屏幕的上面移動一格美莫，方向不變
TRA RIG：向屏幕的右側(cè)移動一格页眯，方向不變
TRA BOT：向屏幕的下面移動一格，方向不變
MOV LEF：方向轉(zhuǎn)向屏幕左側(cè)厢呵，并向屏幕的左側(cè)移動一格
MOV TOP：方向轉(zhuǎn)向屏幕上面窝撵，向屏幕的上面移動一格
MOV RIG：方向轉(zhuǎn)向屏幕右側(cè)，向屏幕的右側(cè)移動一格
MOV BOT：方向轉(zhuǎn)向屏幕下面襟铭，向屏幕的下面移動一格 - 每個指令的執(zhí)行時間是1s（可以自己調(diào)整）
GO和TUN LEF為例
在沒用transition的情況下碌奉，單純用原生js實現(xiàn)，查看全部代碼寒砖。
思路
GO：用定時器來實現(xiàn)1秒動畫赐劣。假設(shè)每個格子是50px大小，1秒內(nèi)移動50px那么可以每隔10ms移動0.5px哩都，循環(huán)100次魁兼。代碼如下：
for (var i = 1; i < const_movetimes + 1; i++) {
var x = (function(index) {
return function() {
obj.style.left = (left - index * 50 / const_movetimes) <= 0 ? 0 : (left - index * 50 / const_movetimes) + 'px';
if (index === const_movetimes)
clearTimeout(t);
}
})(i);
var t = setTimeout(x, 1000 / const_movetimes * i);
}
TUN LEF:用定時器來實現(xiàn)1秒動畫。旋轉(zhuǎn)deg漠嵌，若仍執(zhí)行100次咐汞，那么每次轉(zhuǎn)動deg/100。代碼如下：
for (var i = 1; i < 101; i++) {
var y = (function(index) {
return function() {
box.style.transform = 'rotate(' + (changdeg + deg / 100 * index) % 360 + 'deg)';
if (index === 100) {
clearTimeout(t);
}
}
})(i)
var t = setTimeout(y, 6 * i);
}
存在問題：
以上的實現(xiàn)沒有對多次點擊做處理儒鹿，因此在當(dāng)前動畫還沒結(jié)束時化撕，若又點擊執(zhí)行按鈕后，會出現(xiàn)問題挺身，動畫不會移動到正確位置。
使用transition查看全部代碼
在css樣式表中添加：
transition: all 1s;
那么在js中簡單一行代碼就可完成锌仅。
//go
obj.style.left = (left - 50) <= 0 ? 0 : (left - 50) + 'px';
//roate
box.style.transform = 'rotate(' + (changdeg + deg) % 360 + 'deg)';
重點來了章钾，使用transition后發(fā)現(xiàn)，原先的問題不存在了热芹。自動處理動畫隊列贱傀，多次點擊執(zhí)行按鈕，也會準(zhǔn)確執(zhí)行伊脓。
由此可見省了不少代碼府寒，css3不可小覷魁衙。
