将div从屏幕的中间到右下角动画化到一个固定的位置

Question

我想知道的是如何动画化一个从页面中间的div开始的div。div最初应该而不是具有position: absolute。除非这是不可能的，否则我希望它不要从这个开始，因为在它下面有任何数据似乎都很难。它不会是一个那么大的盒子。我猜高度在100px到600px之间，宽度在400px到800px之间。

我最初发现这个JsFiddle示例做得很好，几乎正是我所需要的。但是div以一个绝对位置开始，并且它已经位于要设置动画的页面的右下角。

一旦div位于页面的右下角，就需要将其固定在那里，这样我就可以在不移动的情况下上下滚动页面在这一点上，我并不担心能否将它推回到它出现的位置

我尝试了几件事：将它排列在我想要的位置，然后单击按钮，添加一个属性为position: absolute的类，并调用如下的animate函数：

chatWindow.stop().animate({
         bottom: 0
       , right: 0
    }, 2000);

但我的猜测是，它最初需要像top: 0; left: 0中那样设置位置，这就是为什么它不起作用。

我已经让它在没有任何动画的情况下工作了，我很想知道如何制作这个东西的动画。如果没有动画，只需将具有法线位置属性的类与具有position: fixed; bottom: 0; right: 0的类切换即可。

这是我创建的一个Codepen示例，它展示了我真正需要的东西，除了不在那里的正确动画部分。任何帮助都会很棒，因为我已经玩了很长一段时间了。

Answer 1

如果要从左到右播放动画，则必须使用left和top值。但负面的一点是，这将导致一个奇怪的动画，因为您希望在开始时保持长方体的relative位置。所以当你做动画时，它会从窗口的左上角开始，这是不好的。

像这个

为了避免这种情况，您必须在开始状态中使用absolute位置。你在问题中说你不想要它，但我认为这是获得所需视觉效果所必需的

在这里看到具有良好效果的的实例

然而，为了保持一个非常好的动画，但我知道这不是你想要的，你可以使用right和bottom值。它将使框从窗口的右角和下角出现。

像这个

Answer 2

根据代码笔示例中的情况，仍然使用绝对定位的一种可能性是通过添加以下CSS来伪造当前定位：

.container {
  padding-top: 250px;
}
.center-window {
  position: absolute;
  right: 50%;
  margin-right: -200px; /* i.e. half of its width */
  bottom: 100%;
  margin-bottom: -250px; /* i.e. its height */
}

然后可以相应地设置右侧、底部和边距属性的动画。看见https://codepen.io/anon/pen/RaOJYY（尽管它目前对填充没有任何作用）。当然，如果你不确定.center窗口的尺寸，也许这个解决方案不太可行。