1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| var testDiv = document.getElementById("test"); testDiv.style.transition = "all 1s ease-out";
// 初始設定為 0 testDiv.style.left = '0px';
// transition 之後馬上消除, 之後就不會再有 transition 效果 testDiv.addEventListener('transitionend', function(){ console.log('end'); testDiv.style.transition = ""; });
// 用非同步的方式在一開始設定 0 > transition 設定 > 新的 left 值 100px > transition setTimeout(function(){ testDiv.style.left = '100px'; }, 0);
// 此時因為已經沒有 transition, 會直接跳到 1000px setTimeout(function(){ testDiv.style.left = '1000px'; }, 2000);
|