使用 jQuery 和/或 CSS3 过渡动画基于百分比的位置（通过插件）

Question

我正在尝试制作一个页面布局，其中的部分在导航时可以滑入和滑出。 每个部分都会填充屏幕（100% 宽度/高度），并且绝对定位在基于百分比的值。

在所附示例中，有四个部分，位置如下：

[a]
[b][c][d]

其中 [a] 位于 0 0，[b] 位于 0 100%，[c] 位于 100% 100%，[d] 位于 200% 100%。

现在，为了实现导航，我将所有部分放置在 100% x 100% 绝对定位的溢出隐藏容器中。当导航到某个部分时，容器的“顶部”和“左侧”值将动画化为该部分偏移量的负数，例如，如果选择 [d]，则容器将动画化为 -200% -100%。

奇怪的行为比比皆是！当导航到 0% 偏移（向左或向上）时，过渡效果很好。然而，其他组合（即负偏移）会导致看似不合逻辑（但一致）的怪癖。

亲自查看：http://www.doronassayas.com/ypsite

以下是摘要：

• [c] 和[d] 到 [a] 或 [b] 都可以正常工作。
• [a] 到 [b] 和 [a] 到 [d]：跳到结尾，跳回开头并开始动画。
• [a] 和 [b] 到 [c] 是最奇怪的 - 在转换开始之前，整个 body （或其他一些高级元素？）弹出到一些无法通过 CSS 追踪的视觉偏移（在Firebug和其他开发工具中不可见）。因此，我们最终不是在 [c] 处，而是在 [d] 处（视觉上），尽管 CSS 值清楚地表明我们应该在 [c] 处。执行随机操作（例如单击 Firebug 层次结构）会将视图重置到正确的位置。搞什么？

在 Firefox 4、Chrome 10 和 Safari 5 中进行了测试，所有浏览器中都会出现相同的行为，无论是使用 jQuery.animate() 还是 Louis Remi 非常酷的 jQuery.transition 插件，它只是在调用 animate() 时将 -prefix-transition 以及新的偏移值应用于容器。

这种陌生感的一致性引起了我的兴趣。有什么想法吗？

非常感谢任何帮助。

Answer 1

经过相当多的揪心之后，我终于通过在 body 元素上打开“overflow: auto”来诊断出错误行为。事实证明，具有负值的定位滑稽动作会对计算出的主体宽度和高度造成严重破坏，该宽度和高度在过渡期间不断变化（并且实际上永远不会停留在窗口的 100% 上，这是预期的行为）。结果是滚动条波动和 body 元素的滚动位置不正确，尽管跨浏览器的一致性令人惊讶。

解决方案非常简单：

body
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

我以前从未使用过的固定位置使 body 元素保持固定的大小和位置，同时忽略对其内容的任何更改。现在你就拥有了！可爱的过渡，硬件加速，感谢 jQuery 和 Louis Remi 的支持。