html - 带缓动的 CSS3 过渡延迟

Question

我遇到了一个我无法弄清楚的奇怪问题（现在正在寻找解决方案 2 小时）。
I'm using a slider, which when slide is selected shows a caption (H3 and p). transition-delay使用属性时，除了标题元素上的不透明度缓入之外，一切正常。

在jsfiddle我已经设置了一个演示。单击下一个或上一个时，字幕元素会延迟显示，但它们上的不透明度缓动不适用于平滑过渡。

任何帮助appriciated :)

Answer 1

现在，这可能只是我误解了你想要做什么，但似乎你错误地假设了转换的继承，以及使用了不精确的选择器。基本上，#test input:checked ~ #full > .caption如果选中任何复选框，则该行将选择 .caption，即始终。

最后，您永远不会真正告诉元素实际为它们的不透明度设置动画。

通过稍微重写你的代码，我想出了这个应该会更好一点。

作为旁注，您不应该使用重复的 ID (#full)，如果有的话，因为如果您尝试访问它会破坏 Javascript。请改用空格分隔的类。