ng-animate는 webpack을 통해로드 할 때 작동하지 않습니다.

Question

내 워크 플로우는 현재 webpack, eslint 및 angular를 사용하고 있습니다. 다음과 같이 내 응용 프로그램에 추가 한 후

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

와 : 내 app.js에서 나는 다음과 같이 NG-애니메이션을 필요로하고

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

문제하면 해당 NG-애니메이션이 될 것 같지 않습니다이다 로드 중입니다. 애니메이션을 작성하려고 할 때 CSS에서 입력하고 자바 스크립트 경로를 구입하는 것이기 때문에 작동하지 않습니다.

ng-animate 및 angular의 버전은 모두 v1.6.3입니다. 제가 여기서 잘못하고있는 것이 있을까요? ng-animate가 작동하지 못하게 할 수있는 eslint 또는 webpack에서해야 할 일이 있습니까?

Answer 1

나는이 문제가있어 내 문제를 파악하기 전에 답변을 찾기 위해 너무 길게 파고 들었다. 이것은 도움이 될 수도 도움이되지 않을 수도 있지만,이 질문을하는 사람이 있으면 다음을 확인하십시오.

그러나 내 NG가 입력, 오류 및 모든 코드가 제대로 가져 받고있는 것으로 나타나지 않았다 있었다

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

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

/종료 : 나는 비슷한 웹팩 설정을 가지고

, 내 app.js 파일은 다음과 거의 같습니다 내 ng-if 지시어가 마크 업을 추가하거나 제거 할 때 클래스가 여전히 적용되지 않습니다. 당신이 각 애니메이션의 문서를 읽을 경우

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

이를 찾을 수 있습니다 : CSS 전환을 위해

는 전환 코드는이 경우 CSS 클래스를 (시작 내에서 정의해야합니다 .ng- 들어가다). 대상 클래스는 으로 전환이 애니메이션으로 변환됩니다.

내가 내가 ... 애니메이션려고 클래스에 정의 된 전환 속성을 가지고 있지 않았다 실현 그래서 나는 다음에 내 CSS를 변경 : 그 후

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

, 모든 일을 시작 바르게. 다행스럽게도 시간 낭비로 인해 실제로 존재하지 않는 문제를 찾아 다니면 다른 사람을 도울 수 있습니다.