transform one element into other animation

by joplomacedo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramjet.js/0.5.0/ramjet.umd.min.js"></script>
<div class="a"></div>
<div class="b hidden"></div>

<button>Do it!</button>

CSS

.a,
.b {
  position: absolute;
  height: 40px;
  width: 40px;
}

.a {
  top: 30px;
  left: 30px;
  background: red;
}

.b {
  top: 150px;
  left: 150px;
  background: blue;
}


button {
position: fixed;
bottom: 100px;
left: 100px;
}

.hidden {
	display: none;
}

JavaScript

var a = document.querySelector('.a'),
		b = document.querySelector('.b'),
		i = 0;

document.querySelector('button').addEventListener('click', function() {
	++i%2 ? toB() : toA();
})


function toB() {
  // set the stage so ramjet copies the right styles...
  b.classList.remove('hidden');

  ramjet.transform(a, b, {
    done: function() {
      // this function is called as soon as the transition completes
      b.classList.remove('hidden');
    }
  });

  // ...then hide the original elements for the duration of the transition
  a.classList.add('hidden');
  b.classList.add('hidden');
}

function toA() {
  // set the stage so ramjet copies the right styles...
  a.classList.remove('hidden');

  ramjet.transform(b, a, {
    done: function() {
      // this function is called as soon as the transition completes
      a.classList.remove('hidden');
    }
  });

  // ...then hide the original elements for the duration of the transition
  a.classList.add('hidden');
  b.classList.add('hidden');
}