我试图仅使用CSS为菜单原型实现一个简单的滑入式幻灯片动画。
代码:https://jsbin.com/lelizi/171/edit?html,css,output
当我点击链接使用:target触发它时,我能够播放动画。问题是,当我单击透明锚点div返回主幻灯片时,动画不会被触发,它会立即返回到主幻灯片。
我错过了什么?
谢谢。
答案 0 :(得分: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顺序。它也不能完全解决你的左侧幻灯片完全覆盖主幻灯片的问题。