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过渡？你可以这样做：

Database.SetInitializer<YourDbContext>(null);

然后你可以在JS中设置你的onclick事件

#yourID {
  transition: all 1s;
}

然后你可以设置一个标志，在左右之间切换，如下所示：

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

如何动态动画一行要滑动的元素？

1 个答案: