JSFiddle - React, Tailwind, and code Playground

by abarykin

HTML

<body>

<div class="kv"></div>
  <input type="text" id="id1" value='11'>
  <br>
  <br>
  <br>
  <input type="text" id="id2">
  <br><br>
  <button>copy</button>

</body>

CSS

.kv {
  width: 100px;
  height: 100px;
  background-color: #f0f;
}

.transfer {
  position: absolute;
  border: 2px dotted #ddd;
  border-radius: 5px;
  z-index: 9999;
}

input.transfer {
  background-color: #f8f8f8;
}

JavaScript

function TransferAnimate(element, target, callback) {
  let transfer = element.clone().appendTo('body');

  transfer
    .addClass('transfer')
    .css({
      'left': element.offset().left,
      'top': element.offset().top,
    })
    .animate({
      'top': target.offset().top,
      'left': target.offset().left,
      'width': target.width(),
      'height': target.height(),
      'opacity': 0.3
    }, 400, function() {
      transfer.remove();
      callback();
    });
}


$('button').click(function() {
   //moveAnimate($('#id1'), $('#id2'));
   moveAnimate($('.kv'), $('#id2'), function(){console.log('callback');});
});