CSS变换转换 - 移至另一个元素位置

Question

在网页上给定的2个元素，我如何对一个元素的位置进行动画化，以便它移至第二个元素，该元素可以在页面上的任何位置。

变换转换似乎不错，因为我需要知道两个元素之间偏移位置的差异。

是否有任何纯粹的CSS方法可以实现这一目标？

与动画在此页面上添加产品的动画非常相似：https：//www.triwa.com/en-gb/watches/family/family/current/current/current-collection/ivory-falken-steel-mesh/

Answer 1

您可以通过过渡做这种事情。因此，元素位置的更改在1秒钟或您想要多长的情况下过渡。

示例：2个框，box1和box2。在单击框2上，我们希望它收缩并移动到Box 1

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>

Answer 2

nope，没有。您无法检索随机定位元素的元素位置。如果您不知道目标位置，则需要参与JS。

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

Answer 3

我认为没有纯粹的CSS来计算2个元素之间的x距离和y距离。您必须使用JS。计算JS中2个元素之间的距离，并使用.css函数将所需元素转换为第二个元素

Answer 4

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

或

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

此功能将获得目标的柱子和大小，并将您的元素移动以匹配。它的速度由transition:all 1s;

决定

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