ng-animate refusant de travailler lors du chargement via le webpack

Question

Mon flux de travail utilise actuellement webpack, eslint et angular. dans mes app.js je suis NÉCESSITANT ng-Animer comme suit:

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

puis l'ajouter à mon application comme suit:

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

Le problème est que ng-Animer ne semble pas être chargement parce que quand j'essaye d'animer ng-entrez etc dans css et même acheter en prenant la route javascript, il ne semble pas fonctionner.

Les versions de ng-animate et angular sont les mêmes, v1.6.3. Y a-t-il quelque chose que je puisse mal faire ici? Y a-t-il quelque chose que je dois faire dans eslint ou webpack qui pourrait empêcher ng-animate de fonctionner?

Answer 1

J'ai eu ce problème et j'ai passé trop de temps à chercher la réponse avant de trouver mon problème. Cela peut être utile ou non, mais si quelqu'un trouve cette question, veuillez vérifier ce qui suit.

J'ai une même configuration webpack, mon fichier app.js ressemble à peu près comme ceci:

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

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

Il n'y avait pas d'erreur et tout le code semblaient se correctement importés, mais mon ng-entrer/sortie les classes n'étaient toujours pas appliquées lorsque ma directive ng-if ajoutait ou supprimait mon balisage.

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

Si vous lisez les documents animés anguleux vous trouverez ceci:

Pour les transitions CSS, le code de transition doit être défini dans le de départ classe CSS (dans ce cas .ng- entrer). La classe de destination est ce que la transition va animer vers.

Je réalisé que je n'ai pas une propriété de transition définie sur la classe que je voulais animer ... Alors j'ai changé mon CSS à ce qui suit:

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

Après cela, tout a commencé à travailler correctement. J'espère que ma frustrante perte de temps à traquer un problème qui n'existait pas vraiment peut aider quelqu'un d'autre.