Search code examples
javascriptcssangularjscss-transitionsng-animate

Is ngAnimate not working anymore?

I can't get a simple angular animation to work. I made a simple Plunkr to show it: https://plnkr.co/edit/bKZev3i1WhNgKhsWOZIQ

HTML 

<head>
  <link rel="stylesheet" href="style.css">
  <script src="angular.js"></script>
  <script src="angular-animate.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-app="myApp">
  <div data-ng-controller="myCtrl">
    <p class="fade-fx" data-ng-repeat="text in texts">{{ text.text }}</p>
  </div>
</body>

CSS

.fade-fx.ng-enter,
.fade-fx.ng-leave {
  -webkit-transition: 1s linear all;
  transition: 2s linear all;
}

.fade-fx.ng-enter,
.fade-fx.ng-leave.ng-leave-active {
  opacity: 0;
}

.fade-fx.ng-leave,
.fade-fx.ng-enter.ng-enter-active {
  opacity: 1;
}

JS

angular.module('myApp', ['ngAnimate']);
angular.module('myApp')
  .controller('myCtrl', function($scope) {
    $scope.texts = [
      {
        text: 'text1'
      },
      {
        text: 'text2'
      },
      {
        text: 'text3'
      }
    ];
  });

The thing is I'm not sure what I'm doing wrong. Any ideas?

Solution

  • Try adding a $timeout to your initial array initialization. See here: https://plnkr.co/edit/ZB312BKV8vAD3hYttaXZ?p=preview

    angular.module('myApp')
  .controller('myCtrl', function($scope, $timeout) {
    $timeout(function() {
      $scope.texts = [{
        text: 'text1'
      }, {
        text: 'text2'
      }, {
        text: 'text3'
    }];
  });
});

    EDIT: On an unrelated note, it would be cleaner to switch 

    .fade-fx.ng-enter,
.fade-fx.ng-leave {
  -webkit-transition: 1s linear all;
  transition: 2s linear all;
}

    to 

    .fade-fx {
  -webkit-transition: 1s linear all;
  transition: 2s linear all;
}