使用 CSS translateY()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7626474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CSS translateY()
提问by Umair A.
I am moving some element from (browser height + element height)px towards the top of the browser at -50px of the browser using CSS keyframes and that works but the problem is it's lagging and I am well aware that using translateY would resolve this issue.
我正在使用 CSS 关键帧将一些元素从（浏览器高度 + 元素高度）px 移到浏览器顶部 -50px 的浏览器顶部，这可行，但问题是它滞后，我很清楚使用 translateY 可以解决这个问题.
Now assume I have a CSS as follows.
现在假设我有一个 CSS，如下所示。
.bubble
{
-webkit-transition: -webkit-transform 1s ease-in-out;
}
.bubble.move
{
-webkit-transform: translateY(-50px);
}
As the element is below the browser screen (browser height + element height)px and I want it to move at the top of the screen at -50px, that doesn't work. It just moves the element from its current position to the -50px of that current position which is not intended. How can I ask transitions to go at -50px of the browser and not he element?
由于元素位于浏览器屏幕下方（浏览器高度 + 元素高度）px，我希望它以 -50px 移动到屏幕顶部，这不起作用。它只是将元素从其当前位置移动到该当前位置的 -50px 非预期位置。我怎样才能让过渡在浏览器的 -50px 而不是元素？
采纳答案by cmplieger
Use javascript to calculate it and set the css using javascript too
使用 javascript 计算它并使用 javascript 设置 css
回答by mike.pj
Translate isn't what you're looking for. You want to position the element absolutely and put the transition on the top property. Something like:
翻译不是您要找的。您想绝对定位元素并将过渡放在 top 属性上。就像是：
.bubble {
position:absolute;
top:100%;
transition:top 1s ease-in-out;
}
.bubble.move {
top:50px;
}
Only bad part about this approach is that the body will need to be the relative parent of the .bubble. I left out vendor prefixes because I hate them.
这种方法唯一不好的地方是 body 需要是 .bubble 的相对父级。我省略了供应商前缀，因为我讨厌它们。
回答by Sneakyness
Have you tried positioning the element absolutely instead of relatively?
您是否尝试过绝对定位元素而不是相对定位？
