Javascript 如何使用css动画使用java脚本将对象移动到另一个对象

我正在尝试仅使用java脚本/Vue js为购物车创建硬币收集动画。所以我决定用原始java脚本来实现它。所以我开始试着看这个教程

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

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

下面是我的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

你必须定义一个单位。将

px

添加到给定的

top

和

left

您应该使用

getClientBoundingRect

而不是

offset

，因为

offset

返回元素从其父元素而不是从页面的偏移量。因此，如果两个元素不共享同一个父元素，请使用

getClientBoundingRect

现在，您正在尝试将元素从第一步移动到最终位置。。如果您试图以350个步骤对其设置动画（正如代码中所示），则应在任何步骤将元素仅从所需路径移动1/350

最后，它应该是这样的：（我建议减少步骤的数量）：

函数collect（）{
var elem=document.getElementById（“动画”）；
var testDiv=document.getElementById（“coin”）；
var diffX=testDiv.getBoundingClientRect（）.left-elem.getBoundingClientRect（）.left；
var diffY=testDiv.getBoundingClientRect（）.top-elem.getBoundingClientRect（）.top；
var dx=diffX/350；
var-dy=diffY/350；
var-pos=0；
变量id=设置间隔（第5帧）；
函数框架（）{
如果（位置==350）{
清除间隔（id）；
}否则{
pos++；
elem.style.top=（parseFloat（elem.style.top）| | 0）+dy+'px'；
elem.style.left=（parseFloat（elem.style.left）| | 0）+dx+'px'；
}
}
}

.coin{
背景图像：
网址（“https://i.pinimg.com/originals/15/ce/a6/15cea65c1fadcfcb144f3b41e32bd9b3.png");
背景大小：100%100%；
边界半径：100%；
高度：80px；
位置：绝对位置；
底部：0；
右：0；
宽度：80px；
-webkit转换：2s线性；
-webkit变换样式：保留-3d；
}
#生动活泼{
宽度：50px；
高度：50px；
位置：绝对位置；
排名：0；
左：0；
背景色：红色；
}

谢谢Yosef..我给了pos 350作为测试，就像学校给的一样。你能告诉我一个方法吗？无论我把要移动的div放在哪里，它都会自动跟随它的目的地。上面的例子应该适用于你放div的任何地方。你有什么问题吗？我试过你的第一个例子。你是说最后一个吗？两者都有。你有什么问题？

.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;
  }

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; 
      }
    }
        }