我將如何動態地對一行元素進行動畫滑動？

Question

我的頁面上有一行當前顯示的5個元素，每個元素都包含圖像。目標是當他們中的一個被點擊時，它向左滑動並顯示關於它的信息，而另一個4淡出。當再次點擊該元素時，它會滑回到右側，其他圖像將淡入。目前，我只是試圖讓滑動工作，但我不理解如何讓圖像到達移動後的正確位置。

目前，因爲我的樣式設置爲像每一個元素：

@keyframes move { 
     from { 
      left: 0; 
     } 
     to { 
      left: -100px; 
     } 
    } 

    div.image{ 
     position: relative; 
     display: block; 
    } 

然後在一個單獨的JS功能，我把它設置爲

document.querySelector(".image").style.animation = "move 1s"; 
document.querySelector(".image").style.left = "-100px"; 

所以這顯然會硬編碼每圖像移動大約100px，但對於行後面的一些圖標100px顯然不夠遠。有沒有辦法讓這個距離更具動態性？

Answer 1

您是否嘗試過使用css轉換？你可以做這樣的事情：

#yourID { 
    transition: all 1s; 
} 

然後你可以設置你的onclick事件在你的JS

var element = document.getElementById('yourID'); 
element.onclick = function(){ 
    element.style.left = '10%'; 
} 

然後，您可以設置一個標誌，左側和右側之間這樣的切換：

var toggled = false; 
var element = document.getElementById('yourID'); 
element.onclick = function(){ 
    if(toggled === false) 
    { 
    element.style.left = '10%'; 
    } else { 
    //return to original position 
    element.style.(however you choose to style) = yourDefaultPosition; 
    } 
}