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

如果给定网页上的2个元素，我如何为一个元素位置设置动画，以便它移动到第二个元素，该元素可以位于页面上的任何位置。css transform translate - 移动到另一个元素位置

转换翻译似乎没有效果，因为我需要知道两个元素之间的偏移位置的差异。

是否有任何纯CSS的方式来实现这一目标？

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

来源

2016-12-06 Marty Wallace

动态？ __ –

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

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

来源

2016-12-06 13:26:03 feeela

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

来源

2016-12-06 13:28:09 Ashique

您可以使用转换来完成这种事情。所以元素位置的变化会在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/

希望这有助于队友。

来源

2016-12-06 13:33:34 Brad

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

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

或者

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

使用此功能将得到目标的现在的位置和大小，移动你的元素，以匹配一个jQuery选择。它是由transition:all 1s;

这里所规定的速度是一个演示：https://jsfiddle.net/33m3t16d/3/

来源

2016-12-06 14:19:43 Brad

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

回答

相关问题