仅在某些情况下延迟过渡

Question

我在一个容器 (overflow: hidden) 中有 4 个叠加层，默认水平翻译为 100%。 .overlay 上的 .active 将其动画化。 激活另一个会从当前的中删除 .active 并将.active 添加到新的中。

现在我想要在“新活动”元素上设置一个过渡延迟，因为同时为旧叠加层和新叠加层设置动画会导致视觉效果不一致（叠加层相互叠加等）。并且同时制作两个动画感觉太仓促了。

我的第一种方法： 兄弟选择器用于延迟 .active 的所有兄弟姐妹的转换，但没有成功，因为兄弟选择器看起来不是“落后”或“周围”...

第二种方法： 在父 atLeastOneIsActive 上上课，然后将转换延迟应用于 .active。效果也不好，因为新旧叠加层都会出现过渡延迟，使一切变得更糟。

很遗憾，我无法向您展示实际示例。 无论如何，这个问题更笼统。但要在此处获取结果图片 2 个屏幕截图

hover on either pin or link

overlay displayed

我正在寻找一种在某些情况下应用延迟的干净而巧妙的方法。 jQuery 仅用于类管理。

Answer 1

激活另一个会从当前的中删除 .active 并将 .active 添加到新的中。

这是用 jQuery .on("mouseover", function(){ 制作的“激活”吗？
因为如果您以这种方式添加和删除类，为什么不简单地在.addClass() 上使用setTimeout？

----------
编辑
我研究了一段时间。
而且我很确定有一个解决方案......

假设我发现了您特定问题的确切性质，更准确地说。

我在小提琴中重现了您的问题和解决方案。
但在你看之前，请阅读我的解释：

图像过渡重叠。
那是因为它们的宽度与动画开始位置的关系。 因为它们被推到视口的右外侧特定距离...

与图像的距离相比，这个距离是不够的。它必须是较大图像的两倍（最小值）。
我通过将它们全部设置为相同的大小找到了它。
这不是强制性的……但肯定是件好事！

因此，解决方案是将它们从视口右侧推开两倍这个“最大宽度”。

我制作了一个 Fiddle 并制作了 4 个按钮（代表您的地图图钉）来为图像设置动画。我还为它们分配了键盘编号，因此可以更轻松地仔细观察图像，而无需使用鼠标定位按钮。 ;)

最后，有一个按钮“Toggle class equalSize”，它强制图像的大小相同。

Have a look now!
:D

.active {
    right:0;
}
img{
    position:fixed;
    right:-1200px;
    top:100px;
    transition: right 2s;
}
.equalSize{
    width:600px;
    height:450px;
}