새 각도 시드 프로젝트에서 ngAnimate를 사용할 수 없습니다.

문제점 : 각도 시드 프로젝트에서 애니메이션이 작동하지 않습니다. 내가 한 행동 :새 각도 시드 프로젝트에서 ngAnimate를 사용할 수 없습니다.

나는 github에서 각진 씨를 가져 왔습니다.
seed-project에는 view1.html과 view2.html의 두 가지보기가 있는데, 해당하는 컨트롤러로 라우트를 통해 잘 연결되어 있습니다.
내가보기에 가장 간단한 CSS 전환, 애니메이션으로 바꿉니다. (다른 프로젝트에서 잘 작동합니다)
View1의 스크립트에서 모듈에 'ngAnimate'를 삽입합니다. var animation3App = angular.module ('animation3', [ 'ngAnimate']);
"angular-animate": "1.2.x"를 bower.json에 추가하고 bower install을 실행하십시오. 각도 애니메이트가 bower_components 디렉토리에 추가/설치되었는지 확인합니다.
난 그냥 이런 각도-노선과 app.js 사이에이 줄을 추가 index.html을하려면 ... SRC = "bower_components/각 - 애니메이션/각도-animate.js"...

애니메이션 : 두 개가 서로 겹쳐서 하나를 클릭하면 불투명도를 0으로 설정하고 나머지는 1로 설정하여 이미지를 하나에서 다른 것으로 변경하고 시간을 1 초로 변경해야합니다. "병합"효과를주는 불투명도.

라우팅에서 index.html로 이동하면 view1.html이 표시됩니다. 각도 시드가 라우팅되는 방식입니다. 만지지 않았습니다. 앵귤러 시드 프로젝트가 아닌 경우 완벽하게 작동하는 애니메이션은 작동하지 않습니다. 이미지는 스왑되지만 애니메이션 효과는 없습니다.

브라우저의 F12 도구에 경고 나 오류가 표시되지 않습니다. batarang으로 디버깅 할 수있는 방법이 있습니까?

편의를 위해 그것의 내부 스크립트 전체 view1.html는 :

<!DOCTYPE html> 
<html ng-app="animation3"> 
<head lang="en"> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body ng-controller="animation3Ctrl"> 

<style> 
    #image-container { 
     position: relative; 
     width: 200px; 
     height: 200px; 
    } 
    .image-back{ 
     position: absolute; 
     top: 25px; 
     left: 25px; 
     width: 150px; 
     height: 150px; 
     border: 1px lightcoral solid; 
    } 
    .image-front{ 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     width: 200px; 
     height: auto; /*height: 200px;*/ 
     border: 1px lightcoral solid; 
    } 

    .animate-show { 
     opacity:1; 
    } 
    .animate-show.ng-hide-add.ng-hide-add-active, 
    .animate-show.ng-hide-remove.ng-hide-remove-active { 
     -webkit-transition:all 1.7s; 
     transition:all 1.7s; 
    } 
    .animate-show.ng-hide { 
     opacity:0; 
    } 
</style> 

<pre> 
    This is view1. 
    Click on Image to see animation. 
    This HTML works perfectly well on it's own, but NOT inside this angular-seed project. 
</pre> 

<div id="image-container"> 
    <img class="image-front animate-show" 
     ng-src="./img/{{photo.imgFront}}" 
     ng-click="flipPhoto()" 
     ng-show="frontShown"> 
    <img class="image-back animate-show" 
     ng-src="./img/{{photo.imgBack}}" 
     ng-click="flipPhoto()" 
     ng-hide="frontShown"> 
</div> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular-animate.js"></script> 
<script> 
    var animation3App = angular.module('animation3', ['ngAnimate']); 

    animation3App.controller('animation3Ctrl', ['$scope', 
     function ($scope) { 
      $scope.photo = { 
       imgBack: 'proXoftLogo.png', 
       imgFront: 'donaldBlack.jpg' 
      } 

      $scope.flipPhoto = function flipPhoto(){ 
       $scope.frontShown = !$scope.frontShown; 
      } 
     }]); 
</script> 

</body> 
</html>

출처

2014-09-18 wojjas

나는 그것을 해결! CSS에서 애니메이션에 오류가 발생했습니다. 제 질문에서 설명한 6 단계가 모두 정확했습니다. 내 문제는 앵귤러 시드와 아무 관련이 없습니다. 솔루션

.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove { 
    -webkit-transition:all 1.7s; 
    transition:all 1.7s; 
} 
.animate-show.ng-hide-add.ng-hide-add-active, 
.animate-show.ng-hide-remove{ 
    opacity:0; 
} 
.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove.ng-hide-remove-active { 
    opacity:1; 
}

(정확히 어떤 부분은 내가 각도에서 애니메이션을 배우고 있기 때문에 나는 아직까지 모릅니다 중요한 하나입니다) : 나는이에 CSS가있다 변경

출처

2014-09-18 09:49:08 wojjas

새 각도 시드 프로젝트에서 ngAnimate를 사용할 수 없습니다.

답변

관련 문제