Angular ngAnimate won't work with id and class

Question

I'm trying to animate certain elements on my web-page, and am running into a problem with the ngAnimate module. I've set up some CSS classes for .ng-enter and .ng-enter-active:

/*Animations*/
.fade.ng-enter {
 -webkit-transition: 1s linear all;
  transition: 1s linear all;
  opacity: 0;
}
.fade.ng-enter-active {
 opacity: 1;
}

 <div class="container searchContent">
  <div class="panel fade" ng-repeat="object in objects">
   <h1>{{object.name}}</h1>
   {{object.description}}
  </div>
 </div>

But this doesn't work. It doesn't work if "fade" is an id either. But, animations still do work when I make it contingent on an HTML element:

/*Animations*/
div.ng-enter {
 -webkit-transition: 1s linear all;
  transition: 1s linear all;
  opacity: 0;
}
div.ng-enter-active {
 opacity: 1;
}

This makes all the divs fade in, but I want to be able to make only certain divs fade. All of the resources I've found online indicate that this is the proper way to do it, but it doesn't work for me, and I'm not getting any errors in the console.

Perhaps it has something to do with UI router or something else, but I'm truly stumped on why it would perform like this.

I'll also include any other code that I think would be relevant to this problem. Tell me if you want to see anything else. Thanks:

Original app configuration:

var app = angular.module("app", [
 'ngRoute',
 'ngAnimate',
 'ui.router',
 'homeController',
 'searchController',
 'apidpController',
 'nLogin',
 'nSignUp',
 'nLogo',
 'flButton',
 'nSearch',
 'userRequest'
]);

app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider", function($stateProvider, $urlRouterProvider, $locationProvider) {
 $urlRouterProvider.otherwise("/home");

 $stateProvider.
  state('presentation', {
   templateUrl: './app/presentation/presentation.tpl.html',
   url: '/'
  }).
  state('presentation.home', {
   templateUrl: './app/home/home.tpl.html',
   controller: 'homeController',
   url: 'home'
  }).
  state('presentation.search', {
   templateUrl: './app/search/search.tpl.html',
   controller: 'searchController',
   url: 'search'
  }).
  state('api', {
   templateUrl: './app/apidp/apidp.tpl.html',
   controller: 'apidpController',
   url: 'api'
  });
}]);

I want the animations to be inside presentation.search

Version 1.2.9. That should be right, I think. 1.2.0 was when the new way to animate was introduced. — jaxoncreed, Jan 24 '15 at 20:14
In what way does it not work? They just don't animate, or they aren't visible at all? — tasseKATT, Jan 24 '15 at 20:25
It doesn't animate. When I use "div" all he elements will fade in, but when using fade, the elements of the class I've designated will just appear. — jaxoncreed, Jan 24 '15 at 20:36
No. I'm using my own CSS. There aren't any conflicting names. Fade is unclaimed. — jaxoncreed, Jan 24 '15 at 21:32
i have found a solution on this post: http://stackoverflow.com/questions/36359864/cant-use-css-id-selector-for-angular-animate-transition — Arden Inside, Apr 11 '16 at 09:48
i've found a solution on this post: [enter link description here](http://stackoverflow.com/questions/36359864/cant-use-css-id-selector-for-angular-animate-transition) — Arden Inside, Apr 11 '16 at 09:51

Angular ngAnimate won't work with id and class

0 Answers0