使用CSS translateY（）

Question

我正在使用CSS关键帧将一些元素从（浏览器高度+元素高度）px移动到浏览器的顶部 - 浏览器的-50px并且可以工作，但问题是它滞后了我很清楚使用translateY会解决这个问题。

现在假设我有一个CSS如下。

.bubble
{
    -webkit-transition: -webkit-transform 1s ease-in-out;
}

.bubble.move
{
    -webkit-transform: translateY(-50px);
}

由于元素低于浏览器屏幕（浏览器高度+元素高度）px，我希望它在-50px的屏幕顶部移动，这不起作用。它只是将元素从当前位置移动到当前位置的-50px，而不是预期的。我怎么能要求转换到-50px的浏览器而不是他的元素？

Answer 1

翻译不是你想要的。您希望绝对定位元素并将过渡放在顶部属性上。类似的东西：

.bubble {
  position:absolute;
  top:100%;
  transition:top 1s ease-in-out;
}
.bubble.move {
  top:50px;
}

这种方法唯一不好的部分是身体需要成为.bubble的亲戚。我遗漏了供应商前缀，因为我讨厌它们。

Answer 2

您是否尝试过绝对定位元素而不是相对？

Answer 3

使用javascript计算它并使用javascript设置css