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 - 移動到另一個元素位置

回答

相關問題