JSFiddle - React, Tailwind, and code Playground

by Jack Violet

HTML

<div id="demo">
  <button>change</button>
  <ul></ul>
</div>

CSS

#demo {
       width: 400px;
       height: 400px;
       border: solid 1px red;
     }

     .move {
       /* transform: translate(0px, 0px); */
       transition: all 1s;
     }

JavaScript

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

var ul = document.getElementsByTagName("ul")[0]
for (var value of arr) {
  var li = document.createElement("li")
  li.textContent = value
  li.className = "trans"
  ul.appendChild(li)
}

var btn = document.getElementsByTagName("button")[0]
btn.onclick = function() {
  var oldUl = document.getElementsByTagName("ul")[0]
  var lis = document.getElementsByTagName("li")
  var oldPos = getPos(lis)

  arr.reverse()
  var newUl = document.createElement("ul")
  for (var value of arr) {
    var li = document.createElement("li")
    li.textContent = value
    li.className = "trans"
    newUl.appendChild(li)
  }
  var container = document.getElementById("demo")
  container.replaceChild(newUl, oldUl)

  init(oldPos)
}

function getPos(NodeArr) {
  var PositionArr = []
  for (let i = 0, len = NodeArr.length; i < len; i++) {
    PositionArr[NodeArr[i].textContent] = NodeArr[i].getBoundingClientRect()
  }
  return PositionArr
}

function init(oldPositions) {
  var liArr = document.getElementsByTagName("li")
  var newPositions = getPos(liArr)

  for (var key = 0; key < liArr.length; key++) {
    var text = liArr[key].textContent
    const oldPos = oldPositions[text]
    const newPos = newPositions[text]
    const dx = oldPos.left - newPos.left
    const dy = oldPos.top - newPos.top
    if (dx || dy) {
      var s = liArr[key].style
      s.transform = s.WebkitTransform = `translate(${dx}px,${dy}px)`
      s.transitionDuration = '0s'
    }
  }
  setTimeout(trans, 100)
}

function trans() {
  var liArr = document.getElementsByTagName("li")
  for (var key = 0; key < liArr.length; key++) {
    var s = liArr[key].style
    s.transform = s.WebkitTransform = s.transitionDuration = ""
    liArr[key].className = "move"
  }
}