CODEWITHSUNDEEP
javascriptcssangularjsng-animateng-show
Josue Espinosa
Josue Espinosa

Reputation: 5089

ng-animate not working as expected

I am trying to do a simple fade in of an element when a boolean variable is set to true. It was working fine earlier, until I changed my AngularJS version to 1.2.15. Am I doing something incorrectly?

Here is a sample JSFiddle.

<div ng-app="myApp" ng-controller="myController">
    {{ready}}
    <div ng-show="ready" ng-animate="{show:'animate-show'}">hello</div>
</div>

$scope.ready = false;

function displayBox() {
    $scope.ready = true;
    $scope.$apply();
}
setTimeout(displayBox, 1000);

Upvotes: 1

Views: 101

Answers (1)

dfsq
dfsq

Reputation: 193261

Animation syntax changed in Angular 1.2.x. Now you have to use ngAnimate module as dependency and change the way you apply animation with CSS. Your HTML becomes:

<div class="animate-show" ng-show="ready">hello</div>

And in your situation you only need this simple CSS:

.animate-show {
    opacity: 1;
    -webkit-transition: all linear 0.5s;
    transition: all linear 0.5s;
}
.animate-show.ng-hide {
    opacity: 0;
}

Demo: http://plnkr.co/edit/nHZ6P6evV2Ee4NtIeMZY?p=preview

Upvotes: 1

Related Questions