As a newcomer to angularjs, I'm facing a challenge in animating only specific elements within my app.
To achieve this, I have included the ngAnimate module in my app setup:
var mrApp = angular.module("mrApp", ["ngRoute", "ngAnimate", "templates"]);
However, the animations seem to affect every element with directives like ng-show, ng-hide, or ng-repeat, which is expected based on the documentation.
My query is: Am I implementing this incorrectly? Should I consider having multiple modules within my app to target specific components for animation? If not, how can I restrict the animation to certain elements only?
UPDATE: Is the following approach correct? I attempted to target elements with the class name 'animate-item', but it doesn't appear to be working as intended:
var mrApp = angular.module("mrApp", ["ngRoute","ngAnimate","templates"]);
mrApp.config(['$animateProvider', function($animateProvider) {
$animateProvider.classNameFilter(/animate-item\b/g);
}]);