CODEWITHSUNDEEP
javascriptangularjsng-animateng-show
Desolator
Desolator

Reputation: 22779

ng-animate is not working with ng-show in angularjs 1.1.5

I was testing the animations in latest angularJS version 1.1.5 and it seems like its not working properly. please check this Fiddle

Html:

<div ng-app>
     <div ng-controller='ctrl'>
        <input type='button' value='click' ng-click='clicked()' />  
        <div ng-show="foo == true"  class='myDiv' ng-animate="{show: 'fadeIn', hide:'fadeOut'}">

        </div>

    </div>
</div>

CSS:

.myDiv{
    width:400px;
    height:200px;
    background-color:red;
}
.fadeIn-setup, .fadeOut-setup {
  -webkit-transition: 1s linear opacity;
  -moz-transition: 1s linear opacity;
  -o-transition: 1s linear opacity;
  transition: 1s linear opacity;
}
.fadeIn-setup{
  opacity:0;
}
.fadeOut-setup{
  opacity:1;
}
.fadeIn-setup.fadeIn-start {
  opacity: 1;
}
.fadeOut-setup.fadeOut-start{
    opacity:0;
}

AngularJS:

function ctrl($scope){
    $scope.foo = false;
    $scope.clicked = function(){
       $scope.foo = !($scope.foo);
    }
}

However when I switch back to version 1.1.4 it works fine but with another bug which they said it was fixed in v1.1.5. now this is confusing. they have fixed previous bug with a newer one? anyways, any help would be appreciated.

Upvotes: 2

Views: 3461

Answers (1)

Desolator
Desolator

Reputation: 22779

so after couple of hours digging I found the solution, all of the documentations are outdated and are not updated to the latest API. Here is the solution:

https://github.com/angular/angular.js/commit/11f712bc

according to the changes log:

The CSS transition classes have changed suffixes. To migrate rename:
.foo-setup {...} to .foo {...} 
.foo-start {...} to .foo-active {...}

or for type: enter, leave, move, show, hide:
.foo-type-setup {...} to .foo-type {...} 
.foo-type-start {...} to .foo-type-active {...}

Upvotes: 5

Related Questions