javascript - 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，使用依赖于您在填充 $scope.data 后设置的作用域 bool 值的 ifs。也许那样的话，动画将无法启动，直到它获得 css 类。