將屏幕中間div到屏幕右下角的div設置為固定位置

Question

我想弄清楚的是如何動畫一個div，它將從一個位於頁面中間的div中間開始。 股利本來不應該有一個position: absolute 。 除非不可能，否則我希望不要從頭開始，因為在它下面有任何數據似乎很難。 它不會是那么大的盒子。 我猜測在100px和600px的高度之間的任何地方，寬度在400px和800px之間。

我最初發現這個JsFiddle示例做得很好，幾乎就是我需要的。 但div以絕對位置開始，它已經位於頁面右下角以進行動畫處理。

一旦div位於頁面的右下角，就需要將其固定在那里，以便我可以在不移動的情況下向上和向下滾動頁面。 在這一點上，我並不擔心能夠把它推回到它來的地方。

我嘗試了幾件事：將它放在我想要的位置，然后點擊一個按鈕，添加一個屬性為position: absolute的類position: absolute並調用animate函數，如下所示：

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

但我的猜測是它最初需要設置在top: 0; left: 0的位置top: 0; left: 0 top: 0; left: 0 ，這就是為什么它不起作用。

我已經讓它在沒有任何動畫的情況下工作，並且希望能夠弄清楚如何為這個東西制作動畫。 沒有動畫，就像用一個具有position: fixed; bottom: 0; right: 0的正常位置屬性來切換一個類一樣簡單position: fixed; bottom: 0; right: 0 position: fixed; bottom: 0; right: 0 position: fixed; bottom: 0; right: 0 。

這是我創建的Codepen示例 ，以顯示除了正確的動畫部分之外我還需要什么。 任何幫助都會很棒，因為我已經玩了很長時間了。

Answer 1

如果您想要從左到右動畫，則必須使用left和top值。 但負面的一點是會導致一個奇怪的動畫，因為你想在開頭保持盒子的relative位置。 因此，當你進行動畫時，它將從窗口的最左上角開始，這是不好的。

像這樣

為避免這種情況，您必須在開始狀態下使用absolute位置。 你在你的問題中說過你不想要它，但我認為需要獲得想要的視覺效果。

在這里看到效果很好的實例

但是，為了保持一個非常好的動畫，但我知道它不是你想要的，你可以使用right和bottom值。 它將使框顯示在窗口的右下角。

像這樣

Answer 2

根據您的codepen示例中的內容，仍然使用絕對定位的一種可能性是通過添加以下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-window的維度，也許這個解決方案不會很有效。