從div中間到屏幕右下角的動畫div到一個固定的位置

Question

我想弄明白的是如何動畫一個div，該div將在頁面中間的div中間開始。該div原本應該不是有一個position: absolute。除非不可能，否則我希望不要以此開始，因爲在它下面有任何數據似乎非常困難。這不會是一個大盒子。我猜在100px和600px之間的任何地方，寬度在400px和800px之間。

我最初發現這個JsFiddle Example，做的很好，幾乎正是我所需要的。但div開頭的絕對位置，它已經位於頁面的右下角進行動畫。

一旦div位於頁面的右下角，它需要在那裏修復，以便我可以在頁面上下滾動而不移動頁面。 在這一點上，我是而不是擔心能夠推回到它來的地方。

有兩件事情我想：在我想要的位置襯起來，然後在點擊按鈕，添加一個類屬性position: absolute並調用動畫功能是這樣的：

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

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

我已經有它沒有任何動畫工作，並希望能夠弄清楚如何動畫這件事。沒有動畫，就像使用正常位置屬性切換一個具有position: fixed; bottom: 0; right: 0的屬性一樣簡單。

這是我創建的Codepen Example，以顯示真正需要的東西，而不是正確的動畫部分不在那裏。任何幫助都會很棒，因爲我已經玩了很長一段時間了。

Answer 1

如果你想從左到右的動畫，你將不得不使用left和top值。但負面的一點是，這會導致一個奇怪的動畫，因爲你想在開始時保持一個relative框的位置。 所以當你做動畫的時候，它會從窗口左上角開始，這並不好。

Like this

爲了避免這種情況，你將不得不使用處於起步狀態absolute位置。你說在你的問題你不想要它，但我認爲這是需要獲得所需的視覺效果。

See here the live example with good effect

然而，要保持一個相當漂亮的動畫，但我知道這是不是你想要的，你可以用right和bottom值玩什麼。它會使窗口出現在窗口的右下角。

Like this

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窗口的尺寸，或許這種解決方案並不完全工作。