CSS3动画无响应

时间:2016-09-01 17:47:37

标签: css3 css-transitions css-animations

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

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

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

我错过了什么?

谢谢。

1 个答案:

答案 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顺序。它也不能完全解决你的左侧幻灯片完全覆盖主幻灯片的问题。