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依赖于在$ scope.data填充后设置的作用域布尔值。也许这样，动画在获得css课程之前就无法开始。