<div class="box">点击我</div>

html {
  background: #f2f2f2;
}
.box {
  width: 100px;
	height: 100px;
  text-align: center;
  line-height: 100px;
  background: #FFF;
	box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  transform: translate(0, 0);
	transition: transform 500ms;
  will-change: transform;
  
  &.move {
    transform: translate(100px, 100px);
	}
}

(function() {
  var box = document.querySelector('.box');
	box.addEventListener('click', function() {
	  box.classList.toggle('move');
	});
})();