jquery - GreenSock - 在 Chrome 中无法点击动画链接之后

Question

有非常奇怪的行为，不仅在 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库是否有错误？我找不到它，因为没有任何报道。

另一个问题:

有没有可能让它更流畅？

Answer 1

你的问题不在 greensock 动画，它在立方体本身。

当你设置

.cube {
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden;
    backface-visibility: hidden; 
}

然后将立方体旋转180度，立方体本身就隐藏了。

最重要的是，第三个面旋转了 180 度，这使得它成为正面并且可见......但是其中的 anchor 将不可点击(不知为何，Chrome 正在失去处理父级不可见时的鼠标事件)，

正如您所说，这是一个特定于 Chromw 的问题，Firefox 可以很好地处理它。 (而且 IE 根本不处理背面可见性)

但是，在您的设计中，立方体不需要隐藏背面可见性，所以放弃它，一切都会好起来的。