Last night to do ctrip’s written test, the third question is to simulate the steps of a sorting, that is, the sorting process in the form of animation performance.

That’s the effect

The first is the basic structure of the page


      
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sort animation demo</title>
</head>
<body>
	<div class="container">

	</div>
</body>
</html>
Copy the code

Then style the element to be sorted

.container{
    text-align:center;
}
.sort{
    position:absolute;
    width:50px;
    height:50px;
    line-height:50px;
    border:1px solid black;
    transition:1s; 
}
Copy the code

Why is absolute positioning? First of all, absolute positioning can separate elements from the document flow, which can minimize rearrangement, and the location of absolute positioning is convenient to calculate, so absolute positioning is used here, of course, fixed is also available. Then the most important thing is that the duration of the animation is set to 1s

The elements to be sorted are then first printed to the interface

var arr = [5.4.8.9.6.5.4.12.3.6.7.8.56];
var container = document.querySelector('.container');
var fragment = document.createDocumentFragment(); // Create document fragments to minimize redrawing and rearrangement
var len = arr.length;
for(let i = 0; i < len; i++ ){
    var node = document.createElement('div');
    node.className = 'sort';
    node.id = i; // This is used when moving positions
    node.style.left = i * 60 + 'px';
    fragment.append(node);
}
container.append(fragment);
Copy the code

At this point, the elements to be sorted are printed to the page first.

for(let i = 0; i < len; i++){
    for(let j = 0; j < len - i; j++){
    	if(arr[j] > arr[j+1]) {// This uses ES6's destruct assignment, which swaps the values of two elements
    		[arr[j],arr[j+1]] = [arr[j+1],arr[j]];
    		// You can do that
    		/* var temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; * /}}}Copy the code

Deconstructing assignments is useful, and structural assignments are recommended

So what do we do with the bubbling sort animation.

So first we’re going to get the distance to the left of the two elements that we’re swapping, and then we’re going to swap the positions of the two elements, and remember we assigned the ID to the element, so we can find the two elements by their ID.

var x = document.getElementById(j)	
var y = document.getElementById(j+1);
// Destruct assignment is also used here
[x.style.left,y.style.left] = [y.style.left,x.style.left];
// Remember to swap ids as well
[x.id,y.id]=[y.id,x.id];
Copy the code

At this point, we’ve done everything we need to do, but if we add this code to bubble sort, we can see that the sort is complete. We can’t see the process. So how do we see the sort process?

The code for the bubbling part is as follows

var time = 1;
for(let i = 0; i < len; i++){
	for(let j = 0; j < len - i; j++){
		if(arr[j] > arr[j+1]){
			[arr[j],arr[j+1]] = [arr[j+1],arr[j]];
			setTimeout(function(){
				var x = document.getElementById(j)	
				var y = document.getElementById(j+1);
				[x.style.left,y.style.left] = [y.style.left,x.style.left];
				[x.id,y.id] = [y.id,x.id];
			},time * 1000) time++; }}}Copy the code

Time is to show the effect every time, if only 1000, then the animation will be completed within 1s, if not clear, you can review the knowledge of the event loop.

At this point, the code ends

Preview the address

All the code

<! DOCTYPE html><html lang="en">
<head>
	<meta charset="UTF-8">
	<title>The sorting</title>
	<style>
		.container{
			text-align: center;
		}
		.sort{
			transition: 1s;
			height: 50px;
			width: 50px;
			border: 1px solid black;
			line-height: 50px;
			position: absolute;
		}
	
	</style>
</head>
<body>
	<div class="container">
	</div>
	<script>
		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++){var temp = document.createElement('div');
			temp.className = 'sort';
			temp.style.left = i*60 +'px';
			temp.id = i;
			temp.innerHTML = arr[i];
			fragment.append(temp);
		}
		container.append(fragment);
		var time = 1;
			for(let i = 0; i < len; i++){
				for(let j = 0; j < len - i; j++){
					if(arr[j] > arr[j+1]){
						[arr[j],arr[j+1]] = [arr[j+1],arr[j]];
						setTimeout(function(){
							var x = document.getElementById(j)	
							var y = document.getElementById(j+1);
							[x.style.left,y.style.left] = [y.style.left,x.style.left];
							[x.id,y.id] = [y.id,x.id];
						},time * 1000) time++; }}}</script>
</body>
</html>
Copy the code