CSS3动画没有响应

Question

我试图实现一个简单的滑进滑出动画的菜单原型只使用CSS。

代码:https://jsbin.com/lelizi/171/edit?html、css、输出

我能够播放动画时，我点击链接使用:target触发它。问题是，当我点击透明锚div返回到主幻灯片时，动画没有被触发，它立即返回到主幻灯片。

我错过了什么?

谢谢。

Answer 1

你的CSS规则设置在不同的元素上。所以当你瞄准main-slide时，你是在该元素上设置动画，而不是left-slide元素。除此之外，你的left-slide元素是全宽的，所以你可能会瞄准left-slide元素的子元素，当你试图点击它，而不是瞄准main-slide元素。

既然你的动画是如此简单，我可以建议使用过渡代替?

演示使用过渡:https://jsfiddle.net/zuksntxb/

#left-slide {
    transition : transform 400ms ease-in;
}
#left-slide:target {
    transform : translateX(100%);
}

EDIT (Bonus Round):

你可以在目标元素以外的元素上设置CSS，但它必须是后续的兄弟元素(或后续兄弟元素的后代):

#main-slide:target ~ #left-slide {
   /*DO SOMETHING TO #left-slide*/
}

这需要切换幻灯片的HTML顺序。它也不适合你的左幻灯片完全覆盖主幻灯片