如何使用CSS动画使用Java脚本将对象移动到另一个对象

Question

我正在尝试仅使用Java脚本/ Vue js在购物车中创建硬币收集动画。所以我决定用原始的Java脚本来做。所以最初我试图看w3schools本教程https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3

某处我有一个目的地div，它是下面的购物车

<div class="coin"  id="coin" @click="collect()">

在某个地方，我有一个要动画化的div，朝着div id“ coin”的方向运行]

<div id ="animate">
</div>

这是我的CSS

.coin {
  background-image: 
  url("https://i.pinimg.com/originals/15/ce/a6/15cea65c1fadcfcb144f3b41e32bd9b3.png");
  background-size: 100% 100%;
  border-radius: 100%;
  height: 80px;
  position: relative;
  width: 80px;
  -webkit-transition: 2s linear;
  -webkit-transform-style: preserve-3d;
 }

#animate {
   width: 50px;
   height: 50px;
   position: absolute;
   background-color: red;
  }

这是我下面的javascript函数

collect(){
    var elem = document.getElementById("animate");   
    var pos = 0;
    var id = setInterval(frame, 5);
      function frame() {
         if (pos == 350) {
         clearInterval(id);
     } else {
          pos++; 
          var testDiv = document.getElementById("coin");
          elem.style.top = testDiv.offsetTop; 
          elem.style.left = testDiv.offsetLeft; 
      }
    }
        }

这里我试图跟随目标div的左，右属性，其中动画不起作用..请帮助我到达目标的div

Answer 1

首先，尝试将px添加到给定的top和left中。像这样：

elem.style.top = testDiv.offsetTop + 'px';
elem.style.left = testDiv.offsetLeft + 'px';

但是无论如何，我不确定您要做什么-现在，您只需在任何框架中为元素设置相同的位置，因此它将从第一帧开始并一直执行到最后。您正在尝试做什么？