CSS Transform Translate - 移动到另一个元素位置

Question

给定网页上的两个元素，如何使一个元素的位置动态变化，以便它移动到第二个元素上，而第二个元素可以位于页面的任何位置。

使用transform: translate似乎不能很好地解决问题，因为需要知道两个元素之间偏移量的差异。

是否有任何纯CSS的方法来实现这一点？

非常类似于在此页面上将产品添加到购物车的动画：https://www.triwa.com/en-gb/watches/family/current-collection/ivory-falken-steel-mesh/。

- Marty Wallace

---

动态地？__ - user5306470

Answer 1

您可以使用过渡来完成这种操作。因此，元素位置的更改会在1秒或您想要的任何时间内进行过渡。

例如：有两个框，Box1和Box2。单击Box2时，我们希望它缩小并移动到Box1。

HTML：

演示：https://jsfiddle.net/33m3t16d/1/ 希望这可以帮助您。

$('.box2').click(function() {
  $(this).removeClass('box2');
  $(this).addClass('box1');
});

.container {
  position: relative;
}

.box {
  background: #333;
  border: 1px solid #fff
}

.box1 {
  transition: all 1s;
  position: absolute;
  top: 0px;
  left: 500px;
  height: 20px;
  width: 20px;
}

.box2 {
  position: absolute;
  top: 100px;
  left: 0px;
  height: 100px;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>

- Brad

---

只是为了澄清，您添加和删除的类别应该仅决定对象的高度、宽度和位置。这样添加和删除类别就不会干扰任何其他样式。 - Brad

Answer 2

没有，不行。你无法获取随机定位元素的元素位置。如果你不知道目标位置，你需要使用JS。

一种方法是通过JS从目标元素读取目标位置，并将一个简短的CSS片段写入包含过渡规则的页面中。这样你可以使用JS来读取和设置必要的位置。但动画本身仍然是由浏览器自身渲染的（在CSS中定义）。

- feeela

Answer 3

我认为没有一种纯CSS的方式来计算两个元素之间的x距离和y距离。你必须使用JS来实现这一点。在JS中计算两个元素之间的距离，并使用.css函数将所需元素转换为第二个元素

- Ashique

Answer 4

正如其他人所说，没有纯CSS的方法。但是这里有一个jQuery选项，您可以使用onclick="moveToElementPosition(this,'#target');"属性。

或者

$('#box2').click(function(){
    moveToElementPosition('#elementToMove','#target');
});

这个函数将获取目标的位置和大小，并移动您的元素以匹配。它执行此操作的速度由transition:all 1s;决定。

这是一个演示：https://jsfiddle.net/33m3t16d/3/

- Brad