前端模擬排序動畫

第一種實現方式預覽

第二種實現方式預覽

第三種實現方式預覽

第四種實現方式預覽

贊一下攜程的這道題目，這才是前端該做的題目，既有意思，又考察了排序演算法，還考察了部分動畫及 dom 操作。話不多說，分析一下這道題目。

用定時器的方式觸發動畫（我這裡是通過改 marginleft 屬性，然後設定 transition）

.container

.sort

為什麼絕對定位呢，首先絕對定位可以讓元素脫離文件流，能夠儘量減少重排，而且絕對定位的位置方便計算，所以這裡採用絕對定位，當然 fixed 也是可以的。然後最重要的就是動畫的持續時間設定為 1s

var arr = [5,4,8,9,6,5,4,12,3,6,7,8,56];

var container = document.queryselector('.container');
var fragment = document.createdocumentfragment(); // 建立文件片段，儘量減少重繪和重排
var len = arr.length;
for(let i = 0; i < len; i++ )

至此，待排序元素輸出到頁面如下

for(let i = 0; i < len; i++)}}

解構賦值還是很好用的，推薦使用結構賦值那麼我們要實現氣泡排序的動畫該怎麼辦呢。

首先我們要獲取交換的兩個元素距離左邊長度，然後交換這兩個元素的位置，還記得我們之前給元素賦值了 id 嗎，我們可以通過 id 來找到這兩個元素。

var x = document.getelementbyid(j)	

var y = document.getelementbyid(j+1);
// 這裡同樣採用解構賦值
[x.style.left,y.style.left] = [y.style.left,x.style.left];
// 記得 id 也要交換
[x.id,y.id]=[y.id,x.id];

至此，我們做完了該做的一切，但是直接把這段**加入到氣泡排序裡面的話那我們直接看到的就是排序完成的效果了，看不到中間的過程，那要怎麼樣才能看到排序的過程呢，這個時候我們可以使用 settimeout。

var time = 1;

for(let i = 0; i < len; i++),time * 1000)
time++;
} }}

time 是為了讓每次的效果都顯示出來，如果只是 1000 的話，那麼這個動畫 1s 之內就會完成，如果不清楚可以複習一下事件迴圈的相關知識。

攜程前端第三題之模擬排序動畫

排序動畫演示title container 採用絕對定位的理由 絕對定位可以讓元素脫離文件流，能夠儘量減少重排，而且絕對定位的位置方便計算。使用 fixed 也可以的。動畫的持續時間設定為 1s sort style head class container div body 1.首先將待排序元素輸...

前端動畫相關筆記

1.四個屬性 1 transition property 規定設定過渡效果的css屬性的名稱。2 transition duration 定義過渡效果花費的時間。預設是 0。3 transition timing function 規定過渡效果的時間曲線。預設是 ease 4 transition ...

模擬技能動畫

g.drawimage bkimage,0,0,null 把虛擬的內容畫到當前視窗 graphics gbkimg bkimage.getgraphics gbkimg.clearrect 0,0,width,height 先清空 this.paint gbkimg 將影象先畫到虛擬上 privat...