我将如何动态地对一行元素进行动画滑动？

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