3

这是 jsFiddle：http: //jsfiddle.net/ybGpJ/4/

这令人沮丧。在 Chrome 和 Safari 中，过渡效果很好，但在 Firefox 中，没有任何动画！这是为什么？

这似乎来自 addClass() 方法。在 Firebug 中打开控制台并打开和关闭类 .scene（用于在我的 css 中转换）后，我可以告诉你没有动画发生。它似乎只是切换背景图像和 h1 的可见性。

但是，如果我切换不透明度或变换的复选框（仍在萤火虫中），它的动画效果就很好 gaahhhh ...

有人可以帮忙吗？

4

1 回答 1

4

我执行了以下步骤以使您的页面在 Firefox 中工作。

  1. 我删除了.scene {overflow:hidden;}.
  2. 我添加-moz-transition: all 1s ease-in-out;到两个类：.page-title和.animated-header-bg.
  3. 最终结果：http: //jsbin.com/amofih/1/watch

以上在我的测试中适用于 Firefox 和 Chrome。您可以在此处编辑我的更改：http: //jsbin.com/amofih/1/edit。

我的更改很小，而且 IMO 并不理想。你有很多 CSS 过渡和转换。您可能想寻找一种更有效的方法来创建动画（可能通过 JS 库）。

另外，我知道我添加的-moz-transition: all 1s ease-in-out;只是覆盖了您的转换定义，但我认为它仍然对您有帮助。在这里，您至少可以看到它可以在 Firefox 中运行。您的定义可能有问题。我会四处搜索，因为有很多示例可供您参考。

于 2013-01-05T17:22:22.023 回答