Question

这是我的代码（请参阅小提琴here）：

img {
    width: 200px;
    height: 200px;
}

.image-container {
    width: 600px;
    height: 200px;
    overflow: hidden;
}

我在image-container中有很多图像，均为200px的平方。溢出的图像是隐藏的。

当我向左滑动图像时，最左边的图像会以平滑的方式消失。

当我向右滑动图像时，最右侧的图像不会以平滑的方式消失。相反，它会瞬间消失。

为什么左右行为之间存在差异？我怎样才能在两边都有流畅的动画？

Answer 1

是什么原因是因为你的图像容器不够宽，而且图像正在下降到下一行，但是溢出正在隐藏它。

请参阅 jsFiddle example 。

使用您目前在图像容器上拥有的CSS将图像容器包装在一个包装中，并使图像容器与所有图像组合一样宽（在我的示例中为4000像素）。

.image-container {
    width: 4000px;
    height: 200px;
}
#wrapper {
    width: 600px;
    height: 200px;
    overflow: hidden;
}

Answer 2

我建议white-space:nowrap

     img {
    width: 200px;
    height: 200px;
}
.image-container {
    white-space:nowrap;
    height: 200px;
}
#wrapper {
    width: 600px;
    height: 200px;
    overflow: hidden;
}

在此处查看演示：http://jsfiddle.net/pavloschris/bsjnq/3/

溢出隐藏的隐藏在一个方向上完成图像，而不是另一个方向

2 个答案: