<div class="block" style="left: 0px; top: 0px;">0</div>
<div class="block" style="left: 80px; top: 0px;">1</div>

<button onclick="swap()" style="position: absolute; top: 80px;">SWAP</button>
  
<style>
.block {
    transition: left ease-out 1s;
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1px solid black;
}
</style>

function swap() {
  var block = document.getElementsByClassName('block'); // live collection
  block[0].before(block[1]);
  
  block[0].offsetTop; // хак вызывающий лишний рендер перед сменой стиля, тем самым разрывая атомарность операции
  
  block[0].style.left = '0px'; 
  block[1].style.left = '80px'; 
}