我觉得这个是整个应用的难点。
看了 visual.net，他的实现是利用 CSS3 的 transform函数里面的 translate。这似乎是不错的想法，但是我发现要用 JS 获取 translate对应的值的话， 有点麻烦。
接着，我又看了一个答案的实现。他的方法是利用 CSS 中的 left。而 left的值是相对于设定了 position: relative的 parent。
立即学习“前端免费学习笔记（深入）”；
我不是很懂上面的方法。但是我想到了另一个方法： left是相对于他本身 。也就是设置他本身为 position: relative而不是他的 parent。
.bar { position: relative; left: 0; /* must set, or not transition when value in falsy */ /*transition: left 1s;*/}我之所以设置 left为 0，是因为我们要用 CSS3 的 transition实现渐变的效果。
然后，每次交换的时候，我们只需要把他当前的 left加/减 柱形图的宽度。没错，这就是这种方法的「缺点」之一，我们需要用 JS 写死柱形图的宽度。
swap () { // ... const getLeft = item => parseInt(item.style.left.slice(0, -2)) || 0 // rm 'px' item1.style.left = `${this.barWidth + getLeft(item1)}px` item2.style.left = `${-this.barWidth + getLeft(item2)}px`}在交换的时候，我们要先找到对应的 DOM 元素，也就是上面代码中的 item和 item2。
怎么找？（假设我们排序的是一堆数字）一开始我想到了两种方法。
第一种是，根据数字，找到具有对用数字的 DOM 元素，就像这样：
swap (value1, value2) { const item1 = this.el.querySelector(`[data-value='${value1}']`)}
但这种方法是行不通的。为什么？
因为当有多个数字相同的时候，我们找到的 DOM 元素不一定是我们想要交换的。因为 querySelector返回的总是第一个匹配的元素。
那我们在 item1后面才开始找 item2行不行？使用 CSS3 的 ~选择器。比如这样：
swap (value1, value2) { const item1 = this.el.querySelector(`[data-value='${value1}']`) const item2 = this.el.querySelector(`[data-value='${value2}'] ~ data-value='${value2}']`)}
这种方法有时可以，有时是不可以的。为什么？
因为我们的 DOM 结构根本就没有变化，只是用 CSS 的 left在视觉上改变了位置而已。
因此，我们的第二种方法当然就是在交换的时候，不仅改变 left的值，而且交换 DOM 的位置。
function swapDOM(element1, element2) { element1.parentNode.insertBefore(element2, element1);}但是，这种方法还是行不通的。因为 insertBefore会把 element2从 DOM 中删掉。这样的话，就没有了「交换」的渐变效果。
果然，我们还是不能 DOM 元素。那么只能返回第一种方法。
这个时候我突然想到了 React 中循环的时候需要写上 key属性。然后。。。然后只要把 key和 数字绑定在一起，查找数字对应的 DOM 元素只需要使用 key就行。
// data = [64, 39, 78, 36]this.items = data.map((d, i) => ({key: `key-${i}`, value: d}))swap (key1, key2) { const item1 = this.el.querySelector(`[data-key='${key1}']`)}终于搞定了「交换」动画了，不知道有没有更好的实现方法呢？
为什么我的「交换」动画一瞬间就跑完了
假设我们的排序算法是这样的：
sort () { const items = this.items for (let i = 0; i < items.length; i++) { for (let j = 0; j < items.length - i - 1; j++) { const item1 = items[j] const item2 = items[j + 1] if (less(item2.value, item1.value)) { swap(j, j + 1, items) } } } return this.items}注意到，我们的 swap函数是在 for循环里面调用的，这是没错的。
然而我们的「交换」动画就跑完了，根本没有渐变的效果，我们想要的是等到前一个交换动画完成后，下一个才发生。为什么会这样？因为我们的两个 for是瞬间就可以跑完的= =
怎么解决这个问题呢？ setInterval？好像会把排序算法的逻辑扰乱。
突然，我想到了 jQuery 好像有个动画队列的东西。
也就是说， 我们可以把所有的动画先放在一个队列里面。然后再一个一个地出队，一个一个地调用。
for () { for () { if (less(item2.value, item1.value)) { this.queue.push(() => this.swap(item1.key, item2.key)) } }}play () { const intervalId = setInterval(() => { if (this.queue.length === 0) { clearInterval(intervalId) } else { const swap = this.queue.shift() swap() } }, 2 * 1000)}看了知乎上的答案，这个问题还有其他实现的方法。 总的来说，就是如何解决异步编程问题。
Tips
可以利用 CSS 的 伪元素 ::before以及 attr函数，来实现柱形图上显示对应的数字。
.bar::before { content: attr(data-value); position: absolute; top: -16px; color: #233;}Continue
我们的代码还可以继续优化，比如接口如何设计，使得可以扩展于其他的排序算法。还有用户体验,比如，排序前中后状态的颜色都设为不同，等等。
