javascript - CSS translateY 正在扩展文档长度

Question

我正在尝试使用 CSS 将我网站的内容翻译成屏幕外的内容，并在加载文档时将其动画化。

但是在加载页面时，文档长度会垂直延伸到要翻译内容的底部。这似乎在页面上停留了一会儿后就消失了，但我显然想一起删除这个问题。

这是我对内容的样式，它在页面加载完成时添加类 .load。

main {
    transform:translate3d(0,100%,0);
    -moz-transform:translate3d(0,100%,0);
    -webkit-transform:translate3d(0,100%,0);
    transition: transform 800ms cubic-bezier(.17,.67,.12,.96);
    -moz-transition: -moz-transform 800ms cubic-bezier(.17,.67,.12,.96);
    -webkit-transition: -webkit-transform 800ms cubic-bezier(.17,.67,.12,.96);
}
main.load {
    transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
}

我已经多次完成类似的事情，没有任何问题，但我似乎无法弄清楚这有什么不同。任何帮助将不胜感激!

Answer 1

您的选择:

1. 使用 z-index 和重叠内容，在翻译元素覆盖的地方添加内容。当它滚动到您可以将其从其他元素下翻译出来。
2. 改为从侧面翻译。这样你就可以使用 overflow-x:hidden 并且仍然可以垂直滚动
3. 使用 display:none、transition: opacity .3s(带前缀)和 opacity:0，等待元素可见在页面上(使用 javascript 检测)，然后更改为 display:block 和 opacity:1
4. 绝对定位元素。这将使元素脱离流程，从而不会占用滚动空间(推荐)

此外，没有理由使用translate3d，你可以只使用translateY(100%)，它不会强制硬件加速