CSS3动画无响应

Question

我试图仅使用CSS为菜单原型实现一个简单的滑入式幻灯片动画。

代码：https://jsbin.com/lelizi/171/edit?html,css,output

当我点击链接使用：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%);
}

编辑（奖金回合）：

您可以在除目标元素之外的元素上设置CSS，但它必须是后续兄弟（或后续兄弟的后代）：

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

这需要切换幻灯片的HTML顺序。它也不能完全解决你的左侧幻灯片完全覆盖主幻灯片的问题。