ng-show/ng-hide打破CSS動畫

Question

我正在使用CSS動畫在我的Angular應用程序中顯示圖形，但只能在AJAX請求完成後顯示圖形，而且我們實際上已將數據放入圖形。

爲了實現這一點，我只是簡單地使用ng-show來隱藏圖形的元素，直到獲得AJAX數據，此時ng-show將評估爲false，並顯示圖形。不幸的是，這似乎打破了圖表上的CSS動畫。

這裏有一個展示的jsfiddle問題：http://jsfiddle.net/2QR6h/

這是它應該如何表現：http://jsfiddle.net/2QR6h/1/

因此，似乎隱藏使用ng-show/ng-hide休息CSS動畫的元素。

任何人都知道解決這個問題的方法？

Answer 1

也許ng-show不會破壞動畫，它可能會在動畫完成後顯示圖形。

也許你可以嘗試在所有類屬性上使用ng-class，使用ifs，這些ifs依賴於在$ scope.data被填充後設置的作用域布爾值。也許這樣，動畫在獲得css類之前無法啓動。