2013-06-22 2 views
3

저는 Phonegap과 AngularJS를 사용하는 모바일 앱을 만들고 있습니다. 나는 현재 개발 중이며 쉽게 로컬 wampserver를 테스트하고 있습니다.AngularJS에서 Ng-animate가 작동하지 않습니까?

ng-view에 대해 ng-animate이 (가) 모바일 앱과 유사한보기 변경을 애니메이션으로 적용하려고 노력하고 있습니다. 내가 따라야 할 가이드 나 내가 사용하는 코드는 아무 것도하지 않는 것 같습니다. 오류나 애니메이션이 없습니다. 여기

<body ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></body> 

그리고 NG-애니메이션에 대한 내 현재 CSS의 :

여기에 내 현재 NG-뷰 코드의

.view-enter, .view-leave { 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
} 

.view-enter { 
    opacity:0; 
    left:100px; 
    width:100%; 
    position:absolute; 
} 
.view-enter.view-enter-active { 
    left:0; 
    opacity:1; 
} 

.view-leave { 
    position:absolute; 
    left:0; 
    width:100%; 
    opacity:1; 
} 
.view-leave.view-leave-active { 
    left:-100px; 
    opacity:0; 
} 

그럼에도 불구하고이 전혀 오류 또는 애니메이션. 내가 뭘 잘못하고 있는지 또는 애니메이션 작업을 어떻게 할 수 있는지에 대한 아이디어가 있습니까? 감사.

+0

사용중인 AngularJS의 버전을 확인할 수 있습니까? ngAnimate를 통한 애니메이션은 불안정한 버전에서만 사용할 수 있으며 최신 안정 버전 인 1.0.7 버전에서는 사용할 수 없습니다. –

+0

@MichalCharemza 와우, 네가 맞아 ... 나는 1.0.7에 있었어. 1.1.5로 업그레이드하면 애니메이션이 즉시 작동합니다. 고맙습니다! – Jakemmarsh

답변

6

내 문제는 Michal Charemza에게 지적되었습니다. 저는 AngularJS의 최신 안정 버전 인 1.0.7을 사용했으며 ng-animate는 불안정한 버전에만있었습니다. here에서 1.1.5를 다운로드했으며 위의 코드는 즉시 작동했습니다.

+0

감사합니다. 위대한 작품입니다! 애니메이션이 어떻게 느껴지는 지에 대해서는 약간의 조정이 필요하지만 개념이 작동하는 것처럼 보입니다. – dmackerman

관련 문제