ng-show/ng-hide 破坏 CSS 动画答案

【问题标题】：ng-show/ng-hide breaking CSS animationsng-show/ng-hide 破坏 CSS 动画
【发布时间】：2014-06-21 00:34:27
【问题描述】：

我正在使用 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 动画。

有人知道解决这个问题的方法吗？

【问题讨论】：

【解决方案1】：

也许 ng-show 没有破坏动画，它可能会在动画完成后显示图形。

也许您可以尝试在所有类属性上使用 ng-class，使用依赖于您在填充 $scope.data 后设置的范围布尔值的 ifs。也许这样动画在获得 css 类之前无法开始。

【讨论】：