3

My workflow is currently using webpack, eslint, and angular. in my app.js I am requiring ng-animate as follows:

require("angular-animate/angular-animate.min");

and then add it to my app as follows:

var mainApp = angular.module("client", [
  //add the components here (personal and 3rd party).
  "ngAnimate",
)];

The problem is that ng-animate does not seem to be loading because when I try to animate ng-enter etc. in css and even buy taking the javascript route, it does not seem to work.

The versions of ng-animate and angular are both the same, v1.6.3. Is there something I might be doing wrong here. Is there something I need to do in eslint or webpack that might be preventing ng-animate from working?

  • Did you end up figuring out what was going on? I'm having this issue as well. – Josh Apr 21 '17 at 16:22
  • In my case, the issue was not related to using webpack, but because I was using a `$templateRequest` decorator. See https://stackoverflow.com/questions/34028703/ng-animate-stopped-working-using-templaterequest-decorator – Erik Baan Aug 03 '17 at 14:28

2 Answers2

3

I had this issue and spent way too long digging to find the answer before figuring out my problem. This may or may not be helpful, but if anyone finds this question please check the following.

I have a similar webpack setup, my app.js file looks roughly like this:

import angular from 'angular';
import ngAnimate from 'angular-animate';

angular
  .module('app', [
    ngAnimate
  ]);

There was no errors and all the code appeared to be getting imported correctly, however my ng-enter/exit classes were still not getting applied when my ng-if directive added or removed my markup.

<p ng-if="$ctrl.test" class="the-test">THE TEST</p>

If you read through the angular animate docs you'll find this:

For CSS transitions, the transition code must be defined within the starting CSS class (in this case .ng-enter). The destination class is what the transition will animate towards.

I realized I didn't have a transition property defined on the class I was trying to animate... So I changed my CSS to the following:

  .the-test {
    color: grey;
    transition: color 1s ease;
  }
  .the-test.ng-enter {
    color: red;
  }
  .the-test.ng-enter.ng-enter-active {
    color: blue;
  }

After that, everything started working correctly. Hopefully my frustrating waste of time hunting down a problem that didn't really exist can help someone else.

Josh
  • 403
  • 7
  • 12
0

First, install "angular-animate" library via npm by using the following command:

npm install 'angular-animate'

then import it in app.js as follows:

require('angular-animate')

Done!!

Deepak Rajput
  • 1