有非常奇怪的行为,不仅在 Google Chrome 中有效,而且在 Firefox 中有效。 我有一个只有侧页(没有顶部和底部)的立方体 - 所以我有 4 页,我将它们左右旋转 90 度。
这是实时示例(所有内容都在页面中 - JS 库取自 CDN,CSS 是内联的,没有图像): http://www.cloomo.com/problem
如何模拟错误:
- 启动谷歌浏览器并转到 http://www.cloomo.com/problem
- 转到第 3 页(绿色背景),您将看到该链接 “Back 2”和“Page 4”不起作用,它们的文字甚至不能 用鼠标选择。
- 您可以通过点击“第 2 页”>“第 3 页”或“左”>“左”转到第 3 页
你能帮我把这些链接变成可点击的吗?
CSS样式或GreeSock库是否有错误?我找不到它,因为没有任何报道。
另一个问题:
有没有可能让它更流畅?
最佳答案
你的问题不在 greensock 动画,它在立方体本身。
当你设置
.cube {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
然后将立方体旋转180度,立方体本身就隐藏了。
最重要的是,第三个面旋转了 180 度,这使得它成为正面并且可见......但是其中的 anchor 将不可点击(不知为何,Chrome 正在失去处理父级不可见时的鼠标事件),
正如您所说,这是一个特定于 Chromw 的问题,Firefox 可以很好地处理它。 (而且 IE 根本不处理背面可见性)
但是,在您的设计中,立方体不需要隐藏背面可见性,所以放弃它,一切都会好起来的。
关于jquery - GreenSock - 在 Chrome 中无法点击动画链接之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28679549/