如何讓此動畫更流暢？

我有一個小的plnkr，我正在使用AngularJS和ngAnimate玩。我現在正在學習css3轉換和轉換。摺疊/展開動畫看起來很酷，但元素佔據了動畫完成之前最終佔據的所有空間。它更糟糕的崩潰，因爲文本收縮和消失，但容器快照關閉，而不是優雅地關閉。如何讓此動畫更流暢？

我一直在試圖模仿JQuery的動畫了slideDown但除非我知道我對動畫的高度，我似乎無法得到這個動畫是光滑的。有誰知道JQuery的slideDown函數如何平滑地動畫可變高度元素？

2014-06-17 Chev

你是否更新過重擊器 - 它與.gif版本不同。 –

@arturgrzesiak是的，我做到了。一旦我有解決方案，我繼續更新我的演示。演示如現在應該的那樣工作。感謝您閱讀我的問題，雖然:) – Chev

我能夠使摺疊/展開動畫通過改變line-height看起來光滑。這讓我在不知道總高度的情況下對線條進行動畫處理。這裏是demo。這可能不是你想要的樣子，但比以前更平滑。我懷疑JQuery的slideDown在計算高度上做了些什麼，但我不確定。

2014-06-17 19:10:45 XrXrXr

這是一個小小的生澀，因爲它這樣做，但我認爲它比以前更好。謝謝:) – Chev

我不確定爲什麼瀏覽器出現動畫效果問題。我運行了一個Chrome時間線，有時候它會低於30幀/秒，而且不是由於重新繪製。另一方面IE瀏覽器運行流暢。可能有更好的方法，但可能更復雜。 – XrXrXr

此外，您應該使用-webkit轉換，因爲scale（）僅適用於Chrome的-web-kit-transform – XrXrXr

回答