CODEWITHSUNDEEP
javascriptcssangularjsanimation
John Dorean
John Dorean

Reputation: 3874

ng-show/ng-hide breaking CSS animations

I'm using CSS animations to display a graph in my Angular app, however the graph can only be shown once a AJAX request has completed and we actually have data to put into the graph.

To achieve that I'm simply using ng-show to hide the graph's element until we get the AJAX data, at which point ng-show will evaluate to false and the graph will show. Unfortunately that seems to be breaking the CSS animation on the graph.

Here's a JSFiddle demonstrating the problem: http://jsfiddle.net/2QR6h/

And this is how it's supposed to behave: http://jsfiddle.net/2QR6h/1/

So it seems hiding the element using ng-show/ng-hide breaks CSS animations.

Anyone know a way around this?

Upvotes: 0

Views: 187

Answers (1)

mwarren
mwarren

Reputation: 2469

Perhaps ng-show isn't breaking the animation, it might be revealing the graphic after the animation has finished.

Maybe you could try using ng-class on all the class attributes, using ifs that depend on a scoped boolean that you set after $scope.data has been filled. Maybe that way the animation won't be able to start until its got the css classes.

Upvotes: 1

Related Questions