transition：過度屬性
transition-property 規定設定過度效果的css屬性的名稱，預設可以寫all
transition-duration 規定完成過度效果需要多少秒或毫秒
transition-timing-function: 預設easetransition-delay：延時時間
ease:逐漸層慢
linear:勻速
ease-in:加速
ease-out:減速
ease-in-out:先加速在減速
cubic-bezier：貝茲路徑
transitionend：過度完成事件
function addEnd(obj,fn){ obj.addEventListener('WebkitTransitionEnd',fn,false); obj.addEventListener('transitionend',fn,false);}function removeEnd(obj,fn){ obj.removeEventListener('WebkitTransitionEnd',fn,false); obj.removeEventListener('transitionend',fn,false);}
註：1在transition裡，如果寫了多個，那沒改變一次樣式，就會觸發一次事件
2注意重複觸發transitionend事件。比如下面重複改變div的y軸位置
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <style> #nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;} </style></head><body><div id="nav"></div><script> var oHome=document.getElementById("nav"); var count = 10; oHome.onclick = function(){ count += 20; oHome.style.transform = 'translate(0,'+ count +'px)' addEnd(this,function(){ count += 20; oHome.style.transform = 'translate(0,'+ count +'px)' }) } function addEnd(obj,fn) { obj.addEventListener('WebkitTransitionEnd',fn,false); obj.addEventListener('transitionend',fn,false); }</script></body></html>
transform：變形
旋轉：rotate()：度數
斜切：skew()：度數
skewX
skewY
縮放：scale()：正數、負數、小數
scaleX
scaleY
位移：translate()：css支援的單位都可以
translateX
translateY
transform的執行順序：後寫的先執行
transform: scale(2) rotate(50deg); 先執行旋轉，在執行縮放
以上transform的值，也會根據中心點（transform-origin）來改變
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
