我在容器内有 4 个叠加层(overflow: hidden)，默认情况下 100% 水平翻译。
.overlay 上的 .active 将其动画化到 View 中。
激活另一个从当前的中删除 .active 并将 .active 添加到新的。
现在我想要“新事件”元素的过渡延迟，因为同时对旧的和新的叠加层进行动画处理会导致视觉效果不一致(叠加层相互叠加等)。而且同时制作动画感觉太仓促了。
我的第一种方法:
兄弟选择器延迟 .active 的所有 sibling 的转换，没有成功，因为兄弟选择器看起来不是“后面”或“周围”......
第二种方法:
在父级 atLeastOneIsActive 上类，然后将转换延迟应用于 .active。效果不佳，因为新旧覆盖层都会出现过渡延迟，从而使一切变得更糟。
很遗憾，我无法向您展示实际示例。 无论如何，这个问题更笼统；但要在此处获取结果图片 2 个屏幕截图
我正在寻找一种在某些情况下应用延迟的简洁而巧妙的方法。 jQuery 仅用于类管理。
最佳答案
activating another one removes .active from the current one and adds .active to the new one.
这个“激活”是用jQuery做的吗.on("mouseover", function(){ ?
因为如果您以这种方式添加和删除类，为什么不简单地使用 setTimeout在 .addClass() 上？
------------------------
编辑
我研究了一段时间。
而且我很确定有一个解决方案...
假设我找到了您具体问题的确切性质，更确切地说。
我在 fiddle 中重现了你的问题和解决方案。
但在您查看之前，请阅读我的解释:
图像过渡是重叠的。
那是因为它们的宽度与动画开始位置的关系。
由于它们被推到视口(viewport)的右外侧特定距离...
这个距离与图像的宽度相比不够。它必须是较大图像的两倍(最小值)。
我通过将它们全部设置为相同大小找到了它。
这不是强制性的……但确实是一件好事!
因此，解决方案是将它们推离视口(viewport)右侧两倍于“最大宽度”的位置。
我制作了一个 Fiddle 并制作了 4 个按钮(代表您的 map 图钉)来为图像设置动画。我还为它们分配了键盘编号，因此无需使用鼠标定位按钮即可更轻松地仔细观察图像。 ;)
最后，有一个按钮“Toggle class equalSize”，它强制图像大小相同。
.active {
right:0;
}
img{
position:fixed;
right:-1200px;
top:100px;
transition: right 2s;
}
.equalSize{
width:600px;
height:450px;
}
关于html - 仅在某些情况下延迟过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38155817/