2014-11-17 3 views
0

이없는 AngularJS와의 $animate : https://docs.angularjs.org/api/ngAnimate/service/$animate 최신 안정 버전 : 1.3.2

하지만 중 하나 나는 그것이 가정 무엇인지 이해하지 못했다 할 또는이 예상되는 동작하지 않습니다

을 나는 같은 사용자 지정 애니메이션이 있습니다

var animationPromise = $animate.addClass(element, 'move-items-animation', { 
    from: { 
    position: 'absolute', 
    }, 
    to: { 
    left : item.x + 'px', 
    top : item.y + 'px' 
    } 
}).then(function(){ 
     element.classList.remove('move-items-animation'); 
}); 
$timeout(function(){ 
    $animate.cancel(animationPromise); //promise.$$cancelFn is not a function` 
}, 300); 

그래서 기본 CSS 변환. 이 외에도 나는 다음과 같은 CSS 전환을했다 :

.move-items-animation-add-active{ 
    transition: 1s ease-in-out; 
} 

그래서 첫째 이상한 행동 : 나는 https://github.com/angular/bower-angular-animate/blob/master/angular-animate.js#L1233

참조 바이올린에서 오는 오류 promise.$$cancelFn is not a function를 얻을 : http://jsfiddle.net/q1L9ycsd/6/

그래서 나는 약간의 코드를 변경 :

var animationPromise = $animate.addClass(element, 'move-items-animation', { 
    from: { 
    position: 'absolute', 
    }, 
    to: { 
    left : item.x + 'px', 
    top : item.y + 'px' 
    } 
}); 
animationPromise.then(function(){ 
     // After canceling this is executed 
     element.classList.remove('move-items-animation'); 
}); 
$timeout(function(){ 
    $animate.cancel(animationPromise); // The animation goes on 
}, 300); 

이제 오류는 없지만 애니메이션은 중지되지 않지만 콜백 f 애니메이션이 실행됩니다. 이것은 내가 수동으로 애니메이션을 중단해야한다는 것을 의미합니까?

참조 바이올린 : 나는 또한 같은 결과에 별도의 이벤트에 애니메이션을 취소하려고했다 http://jsfiddle.net/524nfp0o/2/

는 바이올린을 참조하십시오 http://jsfiddle.net/0o24zw02/

그래서 1. 왜 첫번째 바이올린의 오류? 2. 애니메이션을 실제로 멈추는 방법은 무엇입니까?

감사합니다.

그것은 1.4에서 작동
+0

이상한, 내 아주 야생 추측은 일반적인 취소 방법이없는 약속과 관련이 있으며 앵귤러는 $ animate promise로 처리하지 않습니다. 유일한 오 ne는 취소되었습니다. $$ cancelFn은 함수가 아닙니다. – alou

답변

0

는, 나는 1.3 $의 애니메이션에 설명 보이지 않아요 :

문서화되지 않음 : https://code.angularjs.org/1.4.0/docs/api/ng/service/은 $ 실제로이 문제를 가지고 있었다

애니메이션 : https://code.angularjs.org/1.3.20/docs/api/ng/service/은 $

가 문서화 된 애니메이션 라이브러리와 결과가 유일한 것입니다 :)

+0

이제는'promise가 없다는 것입니다. $$ cancelFn은 함수가 아닙니다 .'라는 오류가 더 이상 맞지 않습니까? 하지만 나머지는 1.4로 테스트 한 결과 여전히 이상한 동작을 보입니다. Firefox에서 '$ animate.cancel'을 사용하는 Chrome은 애니메이션의 끝으로 이동하지만 Firefox에서는 전혀 효과가없는 것으로 보입니다. – Tristan