Question

在网页上给出2个元素，我如何设置一个元素位置的动画，以便它移动到第二个元素，可以是页面上的任何位置。

变换翻译似乎不能正常工作，因为我需要知道两个元素之间偏移位置的差异。

有没有纯粹的CSS方法来实现这个目标？

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

Answer 1

不，没有。您无法检索随机定位元素的元素位置。如果你不知道目标位置，你需要涉及JS。

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

Answer 2

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

Answer 3

你可以通过过渡来做这件事。所以元素位置的变化会在1秒内过渡，或者你想要多长时间。

示例：2个方框，Box1和Box2。在单击框2时，我们希望它缩小并移动到框1

HTML：

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
</div>

CSS：

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

Javascript（Jquery）

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

DEMO：https://jsfiddle.net/33m3t16d/1/

希望这有助于交配。

Answer 4

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

或者

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

此函数将获取目标的位置和大小，并移动元素以匹配。它的速度由transition:all 1s;

决定

以下是演示：https://jsfiddle.net/33m3t16d/3/

css transform translate - 移动到另一个元素位置

4 个答案: